@hed-hog/finance 0.0.350 → 0.0.351

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { PersonPickerField } from '@/app/(app)/(libraries)/contact/_components/person-picker';
+import { PersonPickerField } from '@/app/(app)/(libraries)/crm/_components/person-picker';
 import { CategoryPickerField } from '@/app/(app)/(libraries)/finance/_components/category-picker-field';
 import { CostCenterPickerField } from '@/app/(app)/(libraries)/finance/_components/cost-center-picker-field';
 import {
@@ -33,6 +33,7 @@ import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
 import { Progress } from '@/components/ui/progress';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import {
   Select,
   SelectContent,
@@ -42,7 +43,6 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
@@ -86,6 +86,10 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
+import {
+  getApiErrorMessage,
+  getFirstFormErrorMessage,
+} from '../../_lib/http-error';
 import {
   canApproveTitle,
   canCancelTitle,
@@ -95,6 +99,7 @@ import {
   getFirstActiveSettlementId,
 } from '../../_lib/title-action-rules';
 import { useFinanceData } from '../../_lib/use-finance-data';
+import { useFinanceRealtimeRefresh } from '../../_lib/use-finance-realtime-refresh';
 
 const INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS = 300;
 
@@ -196,6 +201,7 @@ const redistributeRemainingInstallments = (
 const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
   z
     .object({
+      tipoTitulo: z.enum(['parcelado', 'recorrente']).default('parcelado'),
       documento: z.string().trim().min(1, t('validation.documentRequired')),
       fornecedorId: z.string().min(1, t('validation.supplierRequired')),
       competencia: z.string().optional(),
@@ -218,12 +224,33 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
           })
         )
         .min(1, t('validation.installmentsRequired')),
+      recorrencia: z
+        .object({
+          frequencia: z.string().default('monthly'),
+          dataFim: z.string().optional(),
+          numOcorrencias: z.coerce.number().int().min(1).max(600).optional(),
+        })
+        .optional(),
       categoriaId: z.string().optional(),
       centroCustoId: z.string().optional(),
       metodo: z.string().optional(),
       descricao: z.string().optional(),
     })
     .superRefine((values, ctx) => {
+      if (values.tipoTitulo === 'recorrente') {
+        if (
+          !values.recorrencia?.dataFim &&
+          !values.recorrencia?.numOcorrencias
+        ) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['recorrencia'],
+            message: t('validation.recurrenceEndOrCount'),
+          });
+        }
+        return;
+      }
+
       if (values.installments.length !== values.installmentsCount) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -344,6 +371,7 @@ function NovoTituloSheet({
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
+      tipoTitulo: 'parcelado',
       documento: '',
       fornecedorId: '',
       competencia: '',
@@ -351,6 +379,11 @@ function NovoTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       metodo: '',
@@ -379,6 +412,7 @@ function NovoTituloSheet({
       mode: 'create',
       titleId: null,
       values: {
+        tipoTitulo: watchedFormValues.tipoTitulo ?? 'parcelado',
         documento: watchedFormValues.documento ?? '',
         fornecedorId: watchedFormValues.fornecedorId ?? '',
         competencia: watchedFormValues.competencia ?? '',
@@ -389,6 +423,11 @@ function NovoTituloSheet({
           dueDate: installment?.dueDate ?? '',
           amount: Number(installment?.amount ?? 0),
         })) ?? [{ dueDate: '', amount: 0 }],
+        recorrencia: {
+          frequencia: watchedFormValues.recorrencia?.frequencia ?? 'monthly',
+          dataFim: watchedFormValues.recorrencia?.dataFim ?? '',
+          numOcorrencias: watchedFormValues.recorrencia?.numOcorrencias,
+        },
         categoriaId: watchedFormValues.categoriaId ?? '',
         centroCustoId: watchedFormValues.centroCustoId ?? '',
         metodo: watchedFormValues.metodo ?? '',
@@ -442,9 +481,14 @@ function NovoTituloSheet({
       currentLocaleCode
     );
 
-    return t('draftStatus', { relativeLabel, absoluteLabel });
+    return t.has('draftStatus')
+      ? t('draftStatus', { relativeLabel, absoluteLabel })
+      : `${relativeLabel} - ${absoluteLabel}`;
   }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft, t]);
 
+  const tipoTitulo = form.watch('tipoTitulo');
+  const isRecorrente = tipoTitulo === 'recorrente';
+
   const watchedInstallmentsCount = form.watch('installmentsCount');
   const watchedTotalValue = form.watch('valor');
   const watchedDueDate = form.watch('vencimento');
@@ -474,6 +518,7 @@ function NovoTituloSheet({
     }
 
     form.reset({
+      tipoTitulo: 'parcelado',
       documento: '',
       fornecedorId: '',
       competencia: '',
@@ -481,6 +526,11 @@ function NovoTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       metodo: '',
@@ -582,6 +632,7 @@ function NovoTituloSheet({
 
   const handleSubmit = async (values: NewTitleFormValues) => {
     try {
+      const recorrente = values.tipoTitulo === 'recorrente';
       await request({
         url: '/finance/accounts-payable/installments',
         method: 'POST',
@@ -601,11 +652,22 @@ 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,
-          })),
+          ...(recorrente
+            ? {
+                recurrence_rule: {
+                  frequency: values.recorrencia?.frequencia ?? 'monthly',
+                  end_date: values.recorrencia?.dataFim || undefined,
+                  max_occurrences:
+                    values.recorrencia?.numOcorrencias || 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,
         },
       });
@@ -621,8 +683,11 @@ function NovoTituloSheet({
       setAutoRedistributeInstallments(true);
       handleOpenChange(false);
       showToastHandler?.('success', t('messages.createSuccess'));
-    } catch {
-      showToastHandler?.('error', t('messages.createError'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getApiErrorMessage(error, t('messages.createError'))
+      );
     }
   };
 
@@ -630,6 +695,13 @@ function NovoTituloSheet({
     handleOpenChange(false);
   };
 
+  const handleInvalidSubmit = (errors: unknown) => {
+    showToastHandler?.(
+      'error',
+      getFirstFormErrorMessage(errors, t('messages.createError'))
+    );
+  };
+
   const clearUploadedFile = () => {
     setUploadedFileId(null);
     setUploadedFileName('');
@@ -801,7 +873,11 @@ function NovoTituloSheet({
           {t('newTitle.action')}
         </Button>
       </SheetTrigger>
-      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl gap-0">
+      <ResizableSheetContent
+        sheetId="finance-payable-create-title"
+        defaultWidth={896}
+        className="flex h-full w-full flex-col overflow-hidden p-0 gap-0"
+      >
         <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
           <SheetTitle>{t('newTitle.title')}</SheetTitle>
           <SheetDescription>{t('newTitle.description')}</SheetDescription>
@@ -809,7 +885,7 @@ function NovoTituloSheet({
         <Form {...form}>
           <form
             className="flex h-full flex-col overflow-hidden"
-            onSubmit={form.handleSubmit(handleSubmit)}
+            onSubmit={form.handleSubmit(handleSubmit, handleInvalidSubmit)}
           >
             <FinanceSheetBody className="pt-0">
               <FinanceSheetSection className="pt-0 mt-0">
@@ -967,6 +1043,38 @@ function NovoTituloSheet({
                   selectPlaceholder={t('common.select')}
                 />
 
+                <FormField
+                  control={form.control}
+                  name="tipoTitulo"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('titleType.label')}</FormLabel>
+                      <div className="flex gap-2">
+                        <Button
+                          type="button"
+                          variant={
+                            field.value === 'parcelado' ? 'default' : 'outline'
+                          }
+                          size="sm"
+                          onClick={() => field.onChange('parcelado')}
+                        >
+                          {t('titleType.installment')}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant={
+                            field.value === 'recorrente' ? 'default' : 'outline'
+                          }
+                          size="sm"
+                          onClick={() => field.onChange('recorrente')}
+                        >
+                          {t('titleType.recurring')}
+                        </Button>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
                 <div className="grid gap-4 xl:grid-cols-2">
                   <div className="grid gap-4 md:grid-cols-2">
                     <FormField
@@ -1012,7 +1120,11 @@ function NovoTituloSheet({
                       name="valor"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>{t('fields.totalValue')}</FormLabel>
+                          <FormLabel>
+                            {isRecorrente
+                              ? t('fields.totalValueRecurring')
+                              : t('fields.totalValue')}
+                          </FormLabel>
                           <FormControl>
                             <InputMoney
                               ref={field.ref}
@@ -1030,34 +1142,36 @@ function NovoTituloSheet({
                       )}
                     />
 
-                    <FormField
-                      control={form.control}
-                      name="installmentsCount"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('installmentsEditor.countLabel')}
-                          </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>
-                      )}
-                    />
+                    {!isRecorrente && (
+                      <FormField
+                        control={form.control}
+                        name="installmentsCount"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('installmentsEditor.countLabel')}
+                            </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>
                 </div>
               </FinanceSheetSection>
@@ -1066,145 +1180,256 @@ function NovoTituloSheet({
                 title={t('sections.installments.title')}
                 description={t('sections.installments.description')}
               >
-                <div className="space-y-3">
-                  <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-                    <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"
+                {!isRecorrente && (
+                  <div className="space-y-3">
+                    <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                      <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"
+                        >
+                          {t('installmentsEditor.autoRedistributeLabel')}
+                        </Label>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setIsInstallmentsEdited(false);
+                          replaceInstallments(
+                            buildEqualInstallments(
+                              form.getValues('installmentsCount'),
+                              form.getValues('valor'),
+                              form.getValues('vencimento')
+                            )
+                          );
+                        }}
                       >
-                        {t('installmentsEditor.autoRedistributeLabel')}
-                      </Label>
+                        {t('installmentsEditor.recalculate')}
+                      </Button>
                     </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        setIsInstallmentsEdited(false);
-                        replaceInstallments(
-                          buildEqualInstallments(
-                            form.getValues('installmentsCount'),
-                            form.getValues('valor'),
-                            form.getValues('vencimento')
-                          )
-                        );
-                      }}
-                    >
-                      {t('installmentsEditor.recalculate')}
-                    </Button>
-                  </div>
 
-                  {autoRedistributeInstallments && (
-                    <p className="text-xs text-muted-foreground">
-                      {t('installmentsEditor.autoRedistributeHint')}
-                    </p>
-                  )}
+                    {autoRedistributeInstallments && (
+                      <p className="text-xs text-muted-foreground">
+                        {t('installmentsEditor.autoRedistributeHint')}
+                      </p>
+                    )}
 
-                  <div className="space-y-2">
-                    {installmentFields.map((installment, index) => (
-                      <div
-                        key={installment.id}
-                        className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
-                      >
-                        <div className="flex items-center text-sm text-muted-foreground">
-                          #{index + 1}
+                    <div className="space-y-2">
+                      {installmentFields.map((installment, index) => (
+                        <div
+                          key={installment.id}
+                          className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
+                        >
+                          <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">
+                                  {t('installmentsEditor.dueDateLabel')}
+                                </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">
+                                  {t('installmentsEditor.amountLabel')}
+                                </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>
 
-                        <FormField
-                          control={form.control}
-                          name={`installments.${index}.dueDate` as const}
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                {t('installmentsEditor.dueDateLabel')}
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  type="date"
-                                  {...field}
-                                  value={field.value || ''}
-                                  onChange={(event) => {
-                                    setIsInstallmentsEdited(true);
-                                    field.onChange(event);
-                                  }}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
+                    <p
+                      className={`text-xs ${
+                        installmentsDiffCents === 0
+                          ? 'text-muted-foreground'
+                          : 'text-destructive'
+                      }`}
+                    >
+                      {t('installmentsEditor.totalPrefix', {
+                        total: installmentsTotal.toFixed(2),
+                      })}
+                      {installmentsDiffCents > 0 &&
+                        ` ${t('installmentsEditor.adjustmentNeeded')}`}
+                    </p>
+                    {form.formState.errors.installments?.message && (
+                      <p className="text-xs text-destructive">
+                        {form.formState.errors.installments.message}
+                      </p>
+                    )}
+                  </div>
+                )}
 
-                        <FormField
-                          control={form.control}
-                          name={`installments.${index}.amount` as const}
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                {t('installmentsEditor.amountLabel')}
-                              </FormLabel>
+                {isRecorrente && (
+                  <div className="space-y-3 rounded-md border p-3">
+                    <p className="text-sm font-medium">
+                      {t('recurrenceEditor.title')}
+                    </p>
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.frequencia"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.frequencyLabel')}
+                            </FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
                               <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"
-                                />
+                                <SelectTrigger className="w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
                               </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    ))}
-                  </div>
+                              <SelectContent>
+                                <SelectItem value="weekly">
+                                  {t('recurrenceEditor.frequencies.weekly')}
+                                </SelectItem>
+                                <SelectItem value="biweekly">
+                                  {t('recurrenceEditor.frequencies.biweekly')}
+                                </SelectItem>
+                                <SelectItem value="monthly">
+                                  {t('recurrenceEditor.frequencies.monthly')}
+                                </SelectItem>
+                                <SelectItem value="bimonthly">
+                                  {t('recurrenceEditor.frequencies.bimonthly')}
+                                </SelectItem>
+                                <SelectItem value="quarterly">
+                                  {t('recurrenceEditor.frequencies.quarterly')}
+                                </SelectItem>
+                                <SelectItem value="semiannual">
+                                  {t('recurrenceEditor.frequencies.semiannual')}
+                                </SelectItem>
+                                <SelectItem value="annual">
+                                  {t('recurrenceEditor.frequencies.annual')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                  <p
-                    className={`text-xs ${
-                      installmentsDiffCents === 0
-                        ? 'text-muted-foreground'
-                        : 'text-destructive'
-                    }`}
-                  >
-                    {t('installmentsEditor.totalPrefix', {
-                      total: installmentsTotal.toFixed(2),
-                    })}
-                    {installmentsDiffCents > 0 &&
-                      ` ${t('installmentsEditor.adjustmentNeeded')}`}
-                  </p>
-                  {form.formState.errors.installments?.message && (
-                    <p className="text-xs text-destructive">
-                      {form.formState.errors.installments.message}
-                    </p>
-                  )}
-                </div>
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.dataFim"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.endDateLabel')}
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                type="date"
+                                {...field}
+                                value={field.value || ''}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.numOcorrencias"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.maxOccurrencesLabel')}
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                min={1}
+                                max={600}
+                                {...field}
+                                value={field.value ?? ''}
+                                onChange={(e) =>
+                                  field.onChange(
+                                    e.target.value === ''
+                                      ? undefined
+                                      : Number(e.target.value)
+                                  )
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                    {form.formState.errors.recorrencia?.message && (
+                      <p className="text-xs text-destructive">
+                        {form.formState.errors.recorrencia.message}
+                      </p>
+                    )}
+                  </div>
+                )}
               </FinanceSheetSection>
 
               <FinanceSheetSection
@@ -1333,7 +1558,7 @@ function NovoTituloSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }
@@ -1401,6 +1626,7 @@ function EditarTituloSheet({
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
+      tipoTitulo: 'parcelado',
       documento: '',
       fornecedorId: '',
       competencia: '',
@@ -1408,6 +1634,11 @@ function EditarTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       metodo: '',
@@ -1425,6 +1656,9 @@ function EditarTituloSheet({
     control: form.control,
   });
 
+  const tipoTituloEdit = form.watch('tipoTitulo');
+  const isRecorrenteEdit = tipoTituloEdit === 'recorrente';
+
   const {
     clearDraft,
     loadDraft,
@@ -1436,6 +1670,7 @@ function EditarTituloSheet({
       mode: 'edit',
       titleId: titulo?.id ? String(titulo.id) : null,
       values: {
+        tipoTitulo: watchedFormValues.tipoTitulo ?? 'parcelado',
         documento: watchedFormValues.documento ?? '',
         fornecedorId: watchedFormValues.fornecedorId ?? '',
         competencia: watchedFormValues.competencia ?? '',
@@ -1446,6 +1681,11 @@ function EditarTituloSheet({
           dueDate: installment?.dueDate ?? '',
           amount: Number(installment?.amount ?? 0),
         })) ?? [{ dueDate: '', amount: 0 }],
+        recorrencia: {
+          frequencia: watchedFormValues.recorrencia?.frequencia ?? 'monthly',
+          dataFim: watchedFormValues.recorrencia?.dataFim ?? '',
+          numOcorrencias: watchedFormValues.recorrencia?.numOcorrencias,
+        },
         categoriaId: watchedFormValues.categoriaId ?? '',
         centroCustoId: watchedFormValues.centroCustoId ?? '',
         metodo: watchedFormValues.metodo ?? '',
@@ -1499,7 +1739,9 @@ function EditarTituloSheet({
       currentLocaleCode
     );
 
-    return t('draftStatus', { relativeLabel, absoluteLabel });
+    return t.has('draftStatus')
+      ? t('draftStatus', { relativeLabel, absoluteLabel })
+      : `${relativeLabel} - ${absoluteLabel}`;
   }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft, t]);
 
   const watchedInstallmentsCount = form.watch('installmentsCount');
@@ -1562,15 +1804,24 @@ function EditarTituloSheet({
             },
           ];
 
+    const isRecurringTitle = Boolean(titulo.isRecurring);
     form.reset({
+      tipoTitulo: isRecurringTitle ? 'recorrente' : 'parcelado',
       documento: titulo.documento || '',
       fornecedorId: titulo.fornecedorId || '',
       competencia: titulo.competencia || '',
       vencimento:
         normalizedInstallments[0]?.dueDate || toDateInput(titulo?.vencimento),
-      valor: Number(titulo.valorTotal || 0),
+      valor: isRecurringTitle
+        ? Number(normalizedInstallments[0]?.amount || 0)
+        : Number(titulo.valorTotal || 0),
       installmentsCount: normalizedInstallments.length,
       installments: normalizedInstallments,
+      recorrencia: {
+        frequencia: titulo.recurrenceFrequency || 'monthly',
+        dataFim: titulo.recurrenceEndDate || '',
+        numOcorrencias: undefined,
+      },
       categoriaId: titulo.categoriaId || '',
       centroCustoId: titulo.centroCustoId || '',
       metodo: installments[0]?.metodoPagamento || '',
@@ -1706,6 +1957,7 @@ function EditarTituloSheet({
     }
 
     try {
+      const recorrente = values.tipoTitulo === 'recorrente';
       await request({
         url: `/finance/accounts-payable/installments/${titulo.id}`,
         method: 'PATCH',
@@ -1725,11 +1977,22 @@ function EditarTituloSheet({
             : 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,
-          })),
+          ...(recorrente
+            ? {
+                recurrence_rule: {
+                  frequency: values.recorrencia?.frequencia ?? 'monthly',
+                  end_date: values.recorrencia?.dataFim || undefined,
+                  max_occurrences:
+                    values.recorrencia?.numOcorrencias || 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,
         },
       });
@@ -1738,8 +2001,11 @@ function EditarTituloSheet({
       await onUpdated();
       showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
-    } catch {
-      showToastHandler?.('error', t('messages.updateError'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getApiErrorMessage(error, t('messages.updateError'))
+      );
     }
   };
 
@@ -1747,6 +2013,13 @@ function EditarTituloSheet({
     onOpenChange(false);
   };
 
+  const handleInvalidSubmit = (errors: unknown) => {
+    showToastHandler?.(
+      'error',
+      getFirstFormErrorMessage(errors, t('messages.updateError'))
+    );
+  };
+
   const clearUploadedFile = () => {
     setUploadedFileId(null);
     setUploadedFileName('');
@@ -1912,7 +2185,11 @@ function EditarTituloSheet({
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl lg:max-w-4xl">
+      <ResizableSheetContent
+        sheetId="finance-payable-edit-title"
+        defaultWidth={896}
+        className="flex h-full w-full flex-col overflow-hidden p-0"
+      >
         <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
           <SheetTitle>{t('table.actions.edit')}</SheetTitle>
           <SheetDescription>{t('editTitle.description')}</SheetDescription>
@@ -1920,7 +2197,7 @@ function EditarTituloSheet({
         <Form {...form}>
           <form
             className="flex h-full flex-col overflow-hidden"
-            onSubmit={form.handleSubmit(handleSubmit)}
+            onSubmit={form.handleSubmit(handleSubmit, handleInvalidSubmit)}
           >
             <FinanceSheetBody>
               <FinanceSheetSection
@@ -2081,6 +2358,38 @@ function EditarTituloSheet({
                   selectPlaceholder={t('common.select')}
                 />
 
+                <FormField
+                  control={form.control}
+                  name="tipoTitulo"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('titleType.label')}</FormLabel>
+                      <div className="flex gap-2">
+                        <Button
+                          type="button"
+                          variant={
+                            field.value === 'parcelado' ? 'default' : 'outline'
+                          }
+                          size="sm"
+                          onClick={() => field.onChange('parcelado')}
+                        >
+                          {t('titleType.installment')}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant={
+                            field.value === 'recorrente' ? 'default' : 'outline'
+                          }
+                          size="sm"
+                          onClick={() => field.onChange('recorrente')}
+                        >
+                          {t('titleType.recurring')}
+                        </Button>
+                      </div>
+                    </FormItem>
+                  )}
+                />
+
                 <div className="grid gap-4 xl:grid-cols-2">
                   <div className="grid gap-4 md:grid-cols-2">
                     <FormField
@@ -2126,7 +2435,11 @@ function EditarTituloSheet({
                       name="valor"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>{t('fields.totalValue')}</FormLabel>
+                          <FormLabel>
+                            {isRecorrenteEdit
+                              ? t('fields.totalValueRecurring')
+                              : t('fields.totalValue')}
+                          </FormLabel>
                           <FormControl>
                             <InputMoney
                               ref={field.ref}
@@ -2144,35 +2457,37 @@ function EditarTituloSheet({
                       )}
                     />
 
-                    <FormField
-                      control={form.control}
-                      name="installmentsCount"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('installmentsEditor.countLabel')}
-                          </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>
-                      )}
-                    />
+                    {!isRecorrenteEdit && (
+                      <FormField
+                        control={form.control}
+                        name="installmentsCount"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('installmentsEditor.countLabel')}
+                            </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>
                 </div>
               </FinanceSheetSection>
@@ -2181,145 +2496,256 @@ function EditarTituloSheet({
                 title={t('sections.installments.title')}
                 description={t('sections.installments.description')}
               >
-                <div className="space-y-3">
-                  <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
-                    <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"
+                {!isRecorrenteEdit && (
+                  <div className="space-y-3">
+                    <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+                      <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"
+                        >
+                          {t('installmentsEditor.autoRedistributeLabel')}
+                        </Label>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setIsInstallmentsEdited(false);
+                          replaceInstallments(
+                            buildEqualInstallments(
+                              form.getValues('installmentsCount'),
+                              form.getValues('valor'),
+                              form.getValues('vencimento')
+                            )
+                          );
+                        }}
                       >
-                        {t('installmentsEditor.autoRedistributeLabel')}
-                      </Label>
+                        {t('installmentsEditor.recalculate')}
+                      </Button>
                     </div>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        setIsInstallmentsEdited(false);
-                        replaceInstallments(
-                          buildEqualInstallments(
-                            form.getValues('installmentsCount'),
-                            form.getValues('valor'),
-                            form.getValues('vencimento')
-                          )
-                        );
-                      }}
-                    >
-                      {t('installmentsEditor.recalculate')}
-                    </Button>
-                  </div>
 
-                  {autoRedistributeInstallments && (
-                    <p className="text-xs text-muted-foreground">
-                      {t('installmentsEditor.autoRedistributeHint')}
-                    </p>
-                  )}
+                    {autoRedistributeInstallments && (
+                      <p className="text-xs text-muted-foreground">
+                        {t('installmentsEditor.autoRedistributeHint')}
+                      </p>
+                    )}
 
-                  <div className="space-y-2">
-                    {installmentFields.map((installment, index) => (
-                      <div
-                        key={installment.id}
-                        className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
-                      >
-                        <div className="flex items-center text-sm text-muted-foreground">
-                          #{index + 1}
+                    <div className="space-y-2">
+                      {installmentFields.map((installment, index) => (
+                        <div
+                          key={installment.id}
+                          className="grid grid-cols-1 items-start gap-3 rounded-lg border border-border/60 bg-background p-3 sm:grid-cols-[96px_1fr_180px]"
+                        >
+                          <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">
+                                  {t('installmentsEditor.dueDateLabel')}
+                                </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">
+                                  {t('installmentsEditor.amountLabel')}
+                                </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>
 
-                        <FormField
-                          control={form.control}
-                          name={`installments.${index}.dueDate` as const}
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                {t('installmentsEditor.dueDateLabel')}
-                              </FormLabel>
-                              <FormControl>
-                                <Input
-                                  type="date"
-                                  {...field}
-                                  value={field.value || ''}
-                                  onChange={(event) => {
-                                    setIsInstallmentsEdited(true);
-                                    field.onChange(event);
-                                  }}
-                                />
-                              </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
+                    <p
+                      className={`text-xs ${
+                        installmentsDiffCents === 0
+                          ? 'text-muted-foreground'
+                          : 'text-destructive'
+                      }`}
+                    >
+                      {t('installmentsEditor.totalPrefix', {
+                        total: installmentsTotal.toFixed(2),
+                      })}
+                      {installmentsDiffCents > 0 &&
+                        ` ${t('installmentsEditor.adjustmentNeeded')}`}
+                    </p>
+                    {form.formState.errors.installments?.message && (
+                      <p className="text-xs text-destructive">
+                        {form.formState.errors.installments.message}
+                      </p>
+                    )}
+                  </div>
+                )}
 
-                        <FormField
-                          control={form.control}
-                          name={`installments.${index}.amount` as const}
-                          render={({ field }) => (
-                            <FormItem>
-                              <FormLabel className="text-xs">
-                                {t('installmentsEditor.amountLabel')}
-                              </FormLabel>
+                {isRecorrenteEdit && (
+                  <div className="space-y-3 rounded-md border p-3">
+                    <p className="text-sm font-medium">
+                      {t('recurrenceEditor.title')}
+                    </p>
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.frequencia"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.frequencyLabel')}
+                            </FormLabel>
+                            <Select
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
                               <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"
-                                />
+                                <SelectTrigger className="w-full">
+                                  <SelectValue />
+                                </SelectTrigger>
                               </FormControl>
-                              <FormMessage />
-                            </FormItem>
-                          )}
-                        />
-                      </div>
-                    ))}
-                  </div>
+                              <SelectContent>
+                                <SelectItem value="weekly">
+                                  {t('recurrenceEditor.frequencies.weekly')}
+                                </SelectItem>
+                                <SelectItem value="biweekly">
+                                  {t('recurrenceEditor.frequencies.biweekly')}
+                                </SelectItem>
+                                <SelectItem value="monthly">
+                                  {t('recurrenceEditor.frequencies.monthly')}
+                                </SelectItem>
+                                <SelectItem value="bimonthly">
+                                  {t('recurrenceEditor.frequencies.bimonthly')}
+                                </SelectItem>
+                                <SelectItem value="quarterly">
+                                  {t('recurrenceEditor.frequencies.quarterly')}
+                                </SelectItem>
+                                <SelectItem value="semiannual">
+                                  {t('recurrenceEditor.frequencies.semiannual')}
+                                </SelectItem>
+                                <SelectItem value="annual">
+                                  {t('recurrenceEditor.frequencies.annual')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
 
-                  <p
-                    className={`text-xs ${
-                      installmentsDiffCents === 0
-                        ? 'text-muted-foreground'
-                        : 'text-destructive'
-                    }`}
-                  >
-                    {t('installmentsEditor.totalPrefix', {
-                      total: installmentsTotal.toFixed(2),
-                    })}
-                    {installmentsDiffCents > 0 &&
-                      ` ${t('installmentsEditor.adjustmentNeeded')}`}
-                  </p>
-                  {form.formState.errors.installments?.message && (
-                    <p className="text-xs text-destructive">
-                      {form.formState.errors.installments.message}
-                    </p>
-                  )}
-                </div>
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.dataFim"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.endDateLabel')}
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                type="date"
+                                {...field}
+                                value={field.value || ''}
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+
+                      <FormField
+                        control={form.control}
+                        name="recorrencia.numOcorrencias"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>
+                              {t('recurrenceEditor.maxOccurrencesLabel')}
+                            </FormLabel>
+                            <FormControl>
+                              <Input
+                                type="number"
+                                min={1}
+                                max={600}
+                                {...field}
+                                value={field.value ?? ''}
+                                onChange={(e) =>
+                                  field.onChange(
+                                    e.target.value === ''
+                                      ? undefined
+                                      : Number(e.target.value)
+                                  )
+                                }
+                              />
+                            </FormControl>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </div>
+                    {form.formState.errors.recorrencia?.message && (
+                      <p className="text-xs text-destructive">
+                        {form.formState.errors.recorrencia.message}
+                      </p>
+                    )}
+                  </div>
+                )}
               </FinanceSheetSection>
 
               <FinanceSheetSection
@@ -2448,7 +2874,7 @@ function EditarTituloSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }
@@ -2581,6 +3007,8 @@ export default function TitulosPagarPage() {
     placeholderData: (old) => old,
   });
 
+  useFinanceRealtimeRefresh({ request, onRefresh: refetchTitles });
+
   const titulosPagar = paginatedTitlesResponse?.data || [];
   const visibleTitlesTotal = useMemo(
     () =>
@@ -2981,7 +3409,11 @@ export default function TitulosPagarPage() {
           }
         }}
       >
-        <SheetContent className="flex h-full w-full flex-col overflow-hidden p-0 sm:max-w-xl">
+        <ResizableSheetContent
+          sheetId="finance-payable-settle"
+          defaultWidth={576}
+          className="flex h-full w-full flex-col overflow-hidden p-0"
+        >
           <SheetHeader className="border-b border-border/50 px-4 py-4 sm:px-6">
             <SheetTitle>{t('settleSheet.title')}</SheetTitle>
             <SheetDescription>
@@ -3115,7 +3547,7 @@ export default function TitulosPagarPage() {
               </div>
             </form>
           </Form>
-        </SheetContent>
+        </ResizableSheetContent>
       </Sheet>
 
       <FinancePageSection variant="flat">