@hed-hog/finance 0.0.238 → 0.0.240

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,160 @@ 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 { 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';
 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 +240,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 +278,8 @@ function NovoTituloSheet({
       competencia: '',
       vencimento: '',
       valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
       categoriaId: '',
       centroCustoId: '',
       metodo: '',
@@ -140,6 +287,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 +403,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 +418,8 @@ function NovoTituloSheet({
       setUploadedFileName('');
       setExtractionConfidence(null);
       setExtractionWarnings([]);
+      setIsInstallmentsEdited(false);
+      setAutoRedistributeInstallments(true);
       setOpen(false);
       showToastHandler?.('success', 'Título criado com sucesso');
     } catch {
@@ -185,6 +434,8 @@ function NovoTituloSheet({
     setExtractionConfidence(null);
     setExtractionWarnings([]);
     setUploadProgress(0);
+    setIsInstallmentsEdited(false);
+    setAutoRedistributeInstallments(true);
     setOpen(false);
   };
 
@@ -507,6 +758,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"
@@ -643,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;
 
@@ -683,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 =
@@ -730,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}
+            />
+          </>
         }
       />
 
@@ -752,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') },
@@ -850,25 +1976,46 @@ 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>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={titulo.status !== 'rascunho'}
+                        >
                           <CheckCircle className="mr-2 h-4 w-4" />
                           {t('table.actions.approve')}
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem
+                          disabled={
+                            !['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>
                         <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>