@hed-hog/finance 0.0.237 → 0.0.239

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

@@ -3,6 +3,7 @@
 import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/finance/_components/person-field-with-create';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,6 +22,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
 import { Progress } from '@/components/ui/progress';
 import {
@@ -64,23 +66,159 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useRef, useState } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
 import { useFinanceData } from '../../_lib/use-finance-data';
 
-const newTitleFormSchema = z.object({
-  documento: z.string().trim().min(1, 'Documento é obrigatório'),
-  fornecedorId: z.string().min(1, 'Fornecedor é obrigatório'),
-  competencia: z.string().optional(),
-  vencimento: z.string().min(1, 'Vencimento é obrigatório'),
-  valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
-  categoriaId: z.string().optional(),
-  centroCustoId: z.string().optional(),
-  metodo: z.string().optional(),
-  descricao: z.string().optional(),
-});
+const INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS = 300;
+
+const addMonthsToDate = (date: string, monthsToAdd: number) => {
+  if (!date) {
+    return '';
+  }
+
+  const baseDate = new Date(`${date}T00:00:00`);
+  if (Number.isNaN(baseDate.getTime())) {
+    return date;
+  }
+
+  const nextDate = new Date(baseDate);
+  nextDate.setMonth(nextDate.getMonth() + monthsToAdd);
+  return nextDate.toISOString().slice(0, 10);
+};
+
+const buildEqualInstallments = (
+  installmentsCount: number,
+  totalAmount: number,
+  firstDueDate: string
+) => {
+  const safeInstallmentsCount = Math.max(1, Math.floor(installmentsCount || 1));
+  const totalCents = Math.max(0, Math.round((totalAmount || 0) * 100));
+  const baseCents = Math.floor(totalCents / safeInstallmentsCount);
+  const remainder = totalCents % safeInstallmentsCount;
+
+  return Array.from({ length: safeInstallmentsCount }, (_, index) => ({
+    dueDate: addMonthsToDate(firstDueDate, index),
+    amount: (baseCents + (index < remainder ? 1 : 0)) / 100,
+  }));
+};
+
+const redistributeRemainingInstallments = (
+  installments: Array<{ dueDate: string; amount: number }>,
+  editedIndex: number,
+  editedAmount: number,
+  totalAmount: number
+) => {
+  if (installments.length === 0) {
+    return installments;
+  }
+
+  const totalCents = Math.max(0, Math.round((totalAmount || 0) * 100));
+
+  if (installments.length === 1) {
+    return installments.map((installment, index) =>
+      index === editedIndex
+        ? {
+            ...installment,
+            amount: totalCents / 100,
+          }
+        : installment
+    );
+  }
+
+  const minimumPerInstallmentCents = totalCents >= installments.length ? 1 : 0;
+  const remainingInstallmentsCount = installments.length - 1;
+
+  let editedCents = Math.round((editedAmount || 0) * 100);
+  const minEditedCents = minimumPerInstallmentCents;
+  const maxEditedCents =
+    totalCents - remainingInstallmentsCount * minimumPerInstallmentCents;
+
+  if (maxEditedCents < minEditedCents) {
+    editedCents = Math.min(Math.max(editedCents, 0), totalCents);
+  } else {
+    editedCents = Math.min(
+      Math.max(editedCents, minEditedCents),
+      maxEditedCents
+    );
+  }
+
+  const remainingCents = totalCents - editedCents;
+  const baseCents = Math.floor(remainingCents / remainingInstallmentsCount);
+  let remainderCents = remainingCents % remainingInstallmentsCount;
+  let processedInstallments = 0;
+
+  return installments.map((installment, index) => {
+    if (index === editedIndex) {
+      return {
+        ...installment,
+        amount: editedCents / 100,
+      };
+    }
+
+    const amountCents =
+      baseCents + (processedInstallments < remainderCents ? 1 : 0);
+    processedInstallments += 1;
+
+    return {
+      ...installment,
+      amount: amountCents / 100,
+    };
+  });
+};
+
+const newTitleFormSchema = z
+  .object({
+    documento: z.string().trim().min(1, 'Documento é obrigatório'),
+    fornecedorId: z.string().min(1, 'Fornecedor é obrigatório'),
+    competencia: z.string().optional(),
+    vencimento: z.string().min(1, 'Vencimento é obrigatório'),
+    valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
+    installmentsCount: z.coerce
+      .number({ invalid_type_error: 'Quantidade de parcelas inválida' })
+      .int('Quantidade de parcelas inválida')
+      .min(1, 'Mínimo de 1 parcela')
+      .max(120, 'Máximo de 120 parcelas'),
+    installments: z
+      .array(
+        z.object({
+          dueDate: z.string().min(1, 'Vencimento da parcela é obrigatório'),
+          amount: z
+            .number()
+            .min(0.01, 'Valor da parcela deve ser maior que zero'),
+        })
+      )
+      .min(1, 'Informe ao menos uma parcela'),
+    categoriaId: z.string().optional(),
+    centroCustoId: z.string().optional(),
+    metodo: z.string().optional(),
+    descricao: z.string().optional(),
+  })
+  .superRefine((values, ctx) => {
+    if (values.installments.length !== values.installmentsCount) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['installments'],
+        message: 'Quantidade de parcelas não confere com o detalhamento',
+      });
+    }
+
+    const installmentsTotalCents = values.installments.reduce(
+      (acc, installment) => acc + Math.round((installment.amount || 0) * 100),
+      0
+    );
+    const totalCents = Math.round((values.valor || 0) * 100);
+
+    if (installmentsTotalCents !== totalCents) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ['installments'],
+        message: 'A soma das parcelas deve ser igual ao valor total',
+      });
+    }
+  });
 
 type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
 
@@ -101,6 +239,12 @@ function NovoTituloSheet({
   const [uploadedFileName, setUploadedFileName] = useState('');
   const [isUploadingFile, setIsUploadingFile] = useState(false);
   const [isExtractingFileData, setIsExtractingFileData] = useState(false);
+  const [isInstallmentsEdited, setIsInstallmentsEdited] = useState(false);
+  const [autoRedistributeInstallments, setAutoRedistributeInstallments] =
+    useState(true);
+  const redistributionTimeoutRef = useRef<
+    Record<number, ReturnType<typeof setTimeout>>
+  >({});
   const [extractionConfidence, setExtractionConfidence] = useState<
     number | null
   >(null);
@@ -133,6 +277,8 @@ function NovoTituloSheet({
       competencia: '',
       vencimento: '',
       valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
       categoriaId: '',
       centroCustoId: '',
       metodo: '',
@@ -140,6 +286,101 @@ function NovoTituloSheet({
     },
   });
 
+  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');
+
+  useEffect(() => {
+    if (isInstallmentsEdited) {
+      return;
+    }
+
+    replaceInstallments(
+      buildEqualInstallments(
+        watchedInstallmentsCount,
+        watchedTotalValue,
+        watchedDueDate
+      )
+    );
+  }, [
+    isInstallmentsEdited,
+    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) => {
     try {
       await request({
@@ -161,6 +402,11 @@ function NovoTituloSheet({
             : 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,
+          })),
           attachment_file_ids: uploadedFileId ? [uploadedFileId] : undefined,
         },
       });
@@ -171,6 +417,8 @@ function NovoTituloSheet({
       setUploadedFileName('');
       setExtractionConfidence(null);
       setExtractionWarnings([]);
+      setIsInstallmentsEdited(false);
+      setAutoRedistributeInstallments(true);
       setOpen(false);
       showToastHandler?.('success', 'Título criado com sucesso');
     } catch {
@@ -185,6 +433,8 @@ function NovoTituloSheet({
     setExtractionConfidence(null);
     setExtractionWarnings([]);
     setUploadProgress(0);
+    setIsInstallmentsEdited(false);
+    setAutoRedistributeInstallments(true);
     setOpen(false);
   };
 
@@ -507,6 +757,168 @@ function NovoTituloSheet({
                 )}
               />
 
+              <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
+                          );
+                        }}
+                      />
+                    </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-payable"
+                    checked={autoRedistributeInstallments}
+                    onCheckedChange={(checked) =>
+                      setAutoRedistributeInstallments(checked === true)
+                    }
+                  />
+                  <Label
+                    htmlFor="auto-redistribute-installments-payable"
+                    className="text-xs text-muted-foreground"
+                  >
+                    Redistribuir automaticamente o restante ao editar parcela
+                  </Label>
+                </div>
+                {autoRedistributeInstallments && (
+                  <p className="text-xs text-muted-foreground">
+                    A redistribuição ocorre ao parar de digitar e ao sair do
+                    campo.
+                  </p>
+                )}
+
+                <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"
@@ -645,12 +1057,12 @@ function NovoTituloSheet({
 
 export default function TitulosPagarPage() {
   const t = useTranslations('finance.PayableInstallmentsPage');
-  const { request } = useApp();
+  const { request, currentLocaleCode, showToastHandler } = useApp();
   const { data, refetch } = useFinanceData();
   const { titulosPagar, pessoas } = data;
 
   const { data: categoriasData } = useQuery<any[]>({
-    queryKey: ['finance-categories-options'],
+    queryKey: ['finance-categories-options', currentLocaleCode],
     queryFn: async () => {
       const response = await request({
         url: '/finance/categories',
@@ -696,6 +1108,29 @@ export default function TitulosPagarPage() {
     return matchesSearch && matchesStatus;
   });
 
+  const handleOpenAttachment = async (fileId?: string) => {
+    if (!fileId) {
+      return;
+    }
+
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${fileId}`,
+        method: 'PUT',
+      });
+
+      const url = response?.data?.url;
+      if (!url) {
+        showToastHandler?.('error', 'Não foi possível abrir o anexo');
+        return;
+      }
+
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível abrir o anexo');
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -776,7 +1211,22 @@ export default function TitulosPagarPage() {
                       {titulo.documento}
                     </Link>
                     {titulo.anexos.length > 0 && (
-                      <Paperclip className="ml-1 inline h-3 w-3 text-muted-foreground" />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="ml-1 inline-flex h-5 w-5 align-middle text-muted-foreground"
+                        onClick={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          const firstAttachmentId =
+                            titulo.anexosDetalhes?.[0]?.id;
+                          void handleOpenAttachment(firstAttachmentId);
+                        }}
+                        aria-label="Abrir anexo"
+                      >
+                        <Paperclip className="h-3 w-3" />
+                      </Button>
                     )}
                   </TableCell>
                   <TableCell>{fornecedor?.nome}</TableCell>
@@ -817,15 +1267,27 @@ export default function TitulosPagarPage() {
                           {t('table.actions.edit')}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={titulo.status !== 'rascunho'}
+                        >
                           <CheckCircle className="mr-2 h-4 w-4" />
                           {t('table.actions.approve')}
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={
+                            !['aprovado', 'aberto', 'parcial'].includes(
+                              titulo.status
+                            )
+                          }
+                        >
                           <Download className="mr-2 h-4 w-4" />
                           {t('table.actions.settle')}
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={
+                            !['parcial', 'liquidado'].includes(titulo.status)
+                          }
+                        >
                           <Undo className="mr-2 h-4 w-4" />
                           {t('table.actions.reverse')}
                         </DropdownMenuItem>