@hed-hog/finance 0.0.350 → 0.0.351

package/hedhog/frontend/app/accounts-receivable/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 {
@@ -40,6 +40,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,
@@ -49,7 +50,6 @@ import {
 } from '@/components/ui/select';
 import {
   Sheet,
-  SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
@@ -98,7 +98,12 @@ 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 { useFinanceData } from '../../_lib/use-finance-data';
+import { useFinanceRealtimeRefresh } from '../../_lib/use-finance-realtime-refresh';
 
 const INSTALLMENT_REDISTRIBUTION_DEBOUNCE_MS = 300;
 
@@ -200,6 +205,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')),
       clienteId: z.string().min(1, t('validation.clientRequired')),
       competencia: z.string().optional(),
@@ -222,12 +228,37 @@ 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()
+            .or(z.literal('').transform(() => undefined)),
+        })
+        .optional(),
       categoriaId: z.string().optional(),
       centroCustoId: z.string().optional(),
       canal: z.string().optional(),
       descricao: z.string().optional(),
     })
     .superRefine((values, ctx) => {
+      if (values.tipoTitulo === 'recorrente') {
+        const r = values.recorrencia;
+        if (!r?.dataFim && !r?.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,
@@ -274,16 +305,22 @@ function NovoTituloSheet({
   t,
   onCreated,
   onOptionsUpdated,
+  open: controlledOpen,
+  onOpenChange,
 }: {
   categorias: any[];
   centrosCusto: any[];
   t: ReturnType<typeof useTranslations>;
   onCreated: () => Promise<any> | void;
   onOptionsUpdated?: () => Promise<any> | void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const { request, showToastHandler, currentLocaleCode, getSettingValue } =
     useApp();
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
   const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
   const [uploadedFileName, setUploadedFileName] = useState('');
   const [isUploadingFile, setIsUploadingFile] = useState(false);
@@ -324,6 +361,7 @@ function NovoTituloSheet({
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
+      tipoTitulo: 'parcelado',
       documento: '',
       clienteId: '',
       competencia: '',
@@ -331,6 +369,11 @@ function NovoTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       canal: '',
@@ -348,6 +391,9 @@ function NovoTituloSheet({
     control: form.control,
   });
 
+  const tipoTitulo = form.watch('tipoTitulo');
+  const isRecorrente = tipoTitulo === 'recorrente';
+
   const {
     clearDraft,
     loadDraft,
@@ -359,6 +405,7 @@ function NovoTituloSheet({
       mode: 'create',
       titleId: null,
       values: {
+        tipoTitulo: watchedFormValues.tipoTitulo ?? 'parcelado',
         documento: watchedFormValues.documento ?? '',
         clienteId: watchedFormValues.clienteId ?? '',
         competencia: watchedFormValues.competencia ?? '',
@@ -369,6 +416,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 ?? '',
         canal: watchedFormValues.canal ?? '',
@@ -422,7 +474,9 @@ function NovoTituloSheet({
       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');
@@ -454,6 +508,7 @@ function NovoTituloSheet({
     }
 
     form.reset({
+      tipoTitulo: 'parcelado',
       documento: '',
       clienteId: '',
       competencia: '',
@@ -461,6 +516,11 @@ function NovoTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       canal: '',
@@ -562,6 +622,7 @@ function NovoTituloSheet({
 
   const handleSubmit = async (values: NewTitleFormValues) => {
     try {
+      const recorrente = values.tipoTitulo === 'recorrente';
       await request({
         url: '/finance/accounts-receivable/installments',
         method: 'POST',
@@ -581,11 +642,22 @@ function NovoTituloSheet({
             : undefined,
           payment_channel: values.canal || 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,
         },
       });
@@ -601,8 +673,11 @@ function NovoTituloSheet({
       setAutoRedistributeInstallments(true);
       setOpen(false);
       showToastHandler?.('success', t('messages.createSuccess'));
-    } catch {
-      showToastHandler?.('error', t('messages.createError'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getApiErrorMessage(error, t('messages.createError'))
+      );
     }
   };
 
@@ -610,6 +685,13 @@ function NovoTituloSheet({
     setOpen(false);
   };
 
+  const handleInvalidSubmit = (errors: unknown) => {
+    showToastHandler?.(
+      'error',
+      getFirstFormErrorMessage(errors, t('messages.createError'))
+    );
+  };
+
   const clearUploadedFile = () => {
     setUploadedFileId(null);
     setUploadedFileName('');
@@ -781,7 +863,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-receivable-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>
@@ -789,7 +875,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">
@@ -947,6 +1033,39 @@ function NovoTituloSheet({
                   selectPlaceholder={t('common.select')}
                 />
 
+                {/* Tipo de título: Parcelado / Recorrente */}
+                <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
@@ -972,7 +1091,11 @@ function NovoTituloSheet({
                       name="vencimento"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>{t('fields.dueDate')}</FormLabel>
+                          <FormLabel>
+                            {isRecorrente
+                              ? t('fields.dueDate')
+                              : t('fields.dueDate')}
+                          </FormLabel>
                           <FormControl>
                             <Input
                               type="date"
@@ -992,7 +1115,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}
@@ -1010,179 +1137,292 @@ 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>
 
-                <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">
-                      {t('installmentsEditor.title')}
-                    </p>
-                    <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>
-
-                  <div className="flex items-center gap-2">
-                    <Checkbox
-                      id="auto-redistribute-installments-receivable"
-                      checked={autoRedistributeInstallments}
-                      onCheckedChange={(checked) =>
-                        setAutoRedistributeInstallments(checked === true)
-                      }
-                    />
-                    <Label
-                      htmlFor="auto-redistribute-installments-receivable"
-                      className="text-xs text-muted-foreground"
-                    >
-                      {t('installmentsEditor.autoRedistributeLabel')}
-                    </Label>
-                  </div>
-                  {autoRedistributeInstallments && (
-                    <p className="text-xs text-muted-foreground">
-                      {t('installmentsEditor.autoRedistributeHint')}
-                    </p>
-                  )}
+                {!isRecorrente && (
+                  <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">
+                        {t('installmentsEditor.title')}
+                      </p>
+                      <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>
 
-                  <div className="space-y-2">
-                    {installmentFields.map((installment, index) => (
-                      <div
-                        key={installment.id}
-                        className="grid grid-cols-1 items-start gap-2 rounded-md border p-2 sm:grid-cols-[96px_1fr_160px]"
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="auto-redistribute-installments-receivable"
+                        checked={autoRedistributeInstallments}
+                        onCheckedChange={(checked) =>
+                          setAutoRedistributeInstallments(checked === true)
+                        }
+                      />
+                      <Label
+                        htmlFor="auto-redistribute-installments-receivable"
+                        className="text-xs text-muted-foreground"
                       >
-                        <div className="flex items-center text-sm text-muted-foreground">
-                          #{index + 1}
+                        {t('installmentsEditor.autoRedistributeLabel')}
+                      </Label>
+                    </div>
+                    {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-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">
+                                  {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>
-                    ))}
+                              <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>
+                        )}
+                      />
+
+                      <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>
-
-                  <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>
+                )}
               </FinanceSheetSection>
 
               <FinanceSheetSection
@@ -1305,7 +1545,7 @@ function NovoTituloSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }
@@ -1371,6 +1611,7 @@ function EditarTituloSheet({
   const form = useForm<NewTitleFormValues>({
     resolver: zodResolver(newTitleFormSchema),
     defaultValues: {
+      tipoTitulo: 'parcelado',
       documento: '',
       clienteId: '',
       competencia: '',
@@ -1378,6 +1619,11 @@ function EditarTituloSheet({
       valor: 0,
       installmentsCount: 1,
       installments: [{ dueDate: '', amount: 0 }],
+      recorrencia: {
+        frequencia: 'monthly',
+        dataFim: '',
+        numOcorrencias: undefined,
+      },
       categoriaId: '',
       centroCustoId: '',
       canal: '',
@@ -1395,6 +1641,9 @@ function EditarTituloSheet({
     control: form.control,
   });
 
+  const tipoTituloEdit = form.watch('tipoTitulo');
+  const isRecorrenteEdit = tipoTituloEdit === 'recorrente';
+
   const {
     clearDraft,
     loadDraft,
@@ -1406,6 +1655,7 @@ function EditarTituloSheet({
       mode: 'edit',
       titleId: titulo?.id ? String(titulo.id) : null,
       values: {
+        tipoTitulo: watchedFormValues.tipoTitulo ?? 'parcelado',
         documento: watchedFormValues.documento ?? '',
         clienteId: watchedFormValues.clienteId ?? '',
         competencia: watchedFormValues.competencia ?? '',
@@ -1416,6 +1666,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 ?? '',
         canal: watchedFormValues.canal ?? '',
@@ -1469,7 +1724,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');
@@ -1532,15 +1789,24 @@ function EditarTituloSheet({
             },
           ];
 
+    const isRecurringTitle = Boolean(titulo.isRecurring);
     form.reset({
+      tipoTitulo: isRecurringTitle ? 'recorrente' : 'parcelado',
       documento: titulo.documento || '',
       clienteId: titulo.clienteId || '',
       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 || '',
       canal: installments[0]?.canal || '',
@@ -1839,6 +2105,7 @@ function EditarTituloSheet({
     }
 
     try {
+      const recorrente = values.tipoTitulo === 'recorrente';
       await request({
         url: `/finance/accounts-receivable/installments/${titulo.id}`,
         method: 'PATCH',
@@ -1858,11 +2125,22 @@ function EditarTituloSheet({
             : undefined,
           payment_channel: values.canal || 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,
         },
       });
@@ -1871,8 +2149,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'))
+      );
     }
   };
 
@@ -1880,9 +2161,20 @@ function EditarTituloSheet({
     onOpenChange(false);
   };
 
+  const handleInvalidSubmit = (errors: unknown) => {
+    showToastHandler?.(
+      'error',
+      getFirstFormErrorMessage(errors, t('messages.updateError'))
+    );
+  };
+
   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-receivable-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>
@@ -1890,7 +2182,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
@@ -2051,6 +2343,39 @@ function EditarTituloSheet({
                   selectPlaceholder={t('common.select')}
                 />
 
+                {/* Tipo de título: Parcelado / Recorrente */}
+                <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
@@ -2096,7 +2421,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}
@@ -2114,181 +2443,294 @@ 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>
 
-                <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">
-                      {t('installmentsEditor.title')}
-                    </p>
-                    <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>
+                {!isRecorrenteEdit && (
+                  <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">
+                        {t('installmentsEditor.title')}
+                      </p>
+                      <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>
 
-                  <div className="flex items-center gap-2">
-                    <Checkbox
-                      id="auto-redistribute-installments-edit-receivable"
-                      checked={autoRedistributeInstallments}
-                      onCheckedChange={(checked) =>
-                        setAutoRedistributeInstallments(checked === true)
-                      }
-                    />
-                    <Label
-                      htmlFor="auto-redistribute-installments-edit-receivable"
-                      className="text-xs text-muted-foreground"
-                    >
-                      {t('installmentsEditor.autoRedistributeLabel')}
-                    </Label>
-                  </div>
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="auto-redistribute-installments-edit-receivable"
+                        checked={autoRedistributeInstallments}
+                        onCheckedChange={(checked) =>
+                          setAutoRedistributeInstallments(checked === true)
+                        }
+                      />
+                      <Label
+                        htmlFor="auto-redistribute-installments-edit-receivable"
+                        className="text-xs text-muted-foreground"
+                      >
+                        {t('installmentsEditor.autoRedistributeLabel')}
+                      </Label>
+                    </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-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 className="space-y-2">
+                      {installmentFields.map((installment, index) => (
+                        <div
+                          key={installment.id}
+                          className="grid grid-cols-1 items-start 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">
+                                  {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>
-                    ))}
+                              <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>
+                        )}
+                      />
+
+                      <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>
-
-                  <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>
+                )}
               </FinanceSheetSection>
 
               <FinanceSheetSection
@@ -2411,7 +2853,7 @@ function EditarTituloSheet({
             </div>
           </form>
         </Form>
-      </SheetContent>
+      </ResizableSheetContent>
     </Sheet>
   );
 }
@@ -2437,6 +2879,7 @@ export default function TitulosReceberPage() {
   const [fromDate, setFromDate] = useState('');
   const [toDate, setToDate] = useState('');
   const [page, setPage] = useState(1);
+  const [isCreateSheetOpen, setIsCreateSheetOpen] = useState(false);
   const pageSize = 10;
 
   const normalizedStatusFilter =
@@ -2487,6 +2930,8 @@ export default function TitulosReceberPage() {
     placeholderData: (old) => old,
   });
 
+  useFinanceRealtimeRefresh({ request, onRefresh: refetchTitles });
+
   const titulosReceber = paginatedTitlesResponse?.data || [];
   const visibleTitlesTotal = useMemo(
     () =>
@@ -2673,6 +3118,8 @@ export default function TitulosReceberPage() {
               categorias={categorias}
               centrosCusto={centrosCusto}
               t={t}
+              open={isCreateSheetOpen}
+              onOpenChange={setIsCreateSheetOpen}
               onCreated={async () => {
                 await Promise.all([refetchTitles(), refetchFinanceData()]);
               }}
@@ -2859,7 +3306,7 @@ export default function TitulosReceberPage() {
             title={t('empty.title')}
             description={t('empty.description')}
             actionLabel={t('newTitle.action')}
-            onAction={() => void refetchTitles()}
+            onAction={() => setIsCreateSheetOpen(true)}
           />
         )}