@hed-hog/finance 0.0.274 → 0.0.276

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

@@ -1,1270 +1,1270 @@
-'use client';
-
-import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
-import { Page, PageHeader } from '@/components/entity-list';
-import { AuditTimeline } from '@/components/ui/audit-timeline';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
-import { Label } from '@/components/ui/label';
-import { Money } from '@/components/ui/money';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
-import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { ChevronDown, ChevronUp, FileText, Loader2, Undo } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { formatarData } from '../../../_lib/formatters';
-import {
-  canApproveTitle,
-  canCancelTitle,
-  canEditTitle,
-  canReverseTitle,
-  canSettleTitle,
-} from '../../../_lib/title-action-rules';
-import { useFinanceData } from '../../../_lib/use-finance-data';
-
-type SettleFormValues = {
-  installmentId: string;
-  amount: number;
-  description?: string;
-};
-
-type SettlementHistoryAllocation = {
-  installmentId: string;
-  installmentSeq: number;
-  amountCents: number;
-};
-
-type SettlementHistoryItem = {
-  normal: {
-    id: string;
-    paidAt: string | null;
-    amountCents: number;
-    type: 'NORMAL';
-    method?: string | null;
-    account?: string | null;
-    accountId?: string | null;
-    createdAt?: string | null;
-    createdBy?: string | null;
-    memo?: string | null;
-    reconciled: boolean;
-    reconciliationId?: string | null;
-  };
-  reversal?: {
-    id: string;
-    paidAt: string | null;
-    amountCents: number;
-    type: 'REVERSAL';
-    createdAt?: string | null;
-    createdBy?: string | null;
-    memo?: string | null;
-  } | null;
-  allocations: SettlementHistoryAllocation[];
-  statusLabel: 'ATIVO' | 'ESTORNADO';
-};
-
-export default function TituloDetalhePage() {
-  const t = useTranslations('finance.PayableInstallmentDetailPage');
-  const settleSchema = useMemo(
-    () =>
-      z.object({
-        installmentId: z.string().min(1, t('validation.installmentRequired')),
-        amount: z.number().min(0.01, t('validation.amountGreaterThanZero')),
-        description: z.string().optional(),
-      }),
-    [t]
-  );
-  const { request, showToastHandler } = useApp();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const params = useParams<{ id: string }>();
-  const id = params?.id;
-  const { data, refetch } = useFinanceData();
-  const {
-    titulosPagar,
-    pessoas,
-    categorias,
-    centrosCusto,
-    logsAuditoria,
-    tags,
-  } = data;
-
-  const titulo = titulosPagar.find((t) => t.id === id);
-
-  const {
-    data: settlementsHistory = [],
-    refetch: refetchSettlementsHistory,
-    isFetching: isFetchingSettlementsHistory,
-  } = useQuery<SettlementHistoryItem[]>({
-    queryKey: ['finance-title-settlements-history', id],
-    enabled: !!id,
-    queryFn: async () => {
-      const response = await request<SettlementHistoryItem[]>({
-        url: `/finance/titles/${id}/settlements-history`,
-        method: 'GET',
-      });
-
-      return (response.data || []) as SettlementHistoryItem[];
-    },
-    placeholderData: (old) => old,
-  });
-
-  const canSettle = canSettleTitle(titulo?.status);
-
-  const settleCandidates = (titulo?.parcelas || []).filter(
-    (parcela: any) =>
-      parcela.status === 'aberto' ||
-      parcela.status === 'parcial' ||
-      parcela.status === 'vencido'
-  );
-
-  const settleForm = useForm<SettleFormValues>({
-    resolver: zodResolver(settleSchema),
-    defaultValues: {
-      installmentId: settleCandidates[0]?.id || '',
-      amount: Number(settleCandidates[0]?.valorAberto || 0),
-      description: '',
-    },
-  });
-
-  const [availableTags, setAvailableTags] = useState<any[]>([]);
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-  const [isCreatingTag, setIsCreatingTag] = useState(false);
-  const [isApproving, setIsApproving] = useState(false);
-  const [isSettling, setIsSettling] = useState(false);
-  const [isCanceling, setIsCanceling] = useState(false);
-  const [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
-  const [isReverseDialogOpen, setIsReverseDialogOpen] = useState(false);
-  const [selectedSettlementIdToReverse, setSelectedSettlementIdToReverse] =
-    useState<string | null>(null);
-  const [reverseReason, setReverseReason] = useState('');
-  const [reversingSettlementId, setReversingSettlementId] = useState<
-    string | null
-  >(null);
-  const [unreconcilingId, setUnreconcilingId] = useState<string | null>(null);
-  const [expandedSettlementRows, setExpandedSettlementRows] = useState<
-    Record<string, boolean>
-  >({});
-
-  useEffect(() => {
-    setAvailableTags(tags || []);
-  }, [tags]);
-
-  useEffect(() => {
-    if (!titulo) {
-      return;
-    }
-
-    setSelectedTagIds(Array.isArray(titulo.tags) ? titulo.tags : []);
-  }, [titulo]);
-
-  useEffect(() => {
-    const firstCandidate = settleCandidates[0];
-    const nextInstallmentId = firstCandidate?.id || '';
-    const nextAmount = Number(firstCandidate?.valorAberto || 0);
-    const currentInstallmentId = settleForm.getValues('installmentId') || '';
-    const currentAmount = Number(settleForm.getValues('amount') || 0);
-
-    if (
-      currentInstallmentId === nextInstallmentId &&
-      currentAmount === nextAmount
-    ) {
-      return;
-    }
-
-    settleForm.reset({
-      installmentId: nextInstallmentId,
-      amount: nextAmount,
-      description: '',
-    });
-  }, [settleForm, settleCandidates]);
-
-  useEffect(() => {
-    const action = searchParams.get('action');
-
-    if (action !== 'settle') {
-      return;
-    }
-
-    if (canSettle && settleCandidates.length > 0) {
-      setIsSettleDialogOpen(true);
-    }
-  }, [canSettle, searchParams, settleCandidates.length]);
-
-  if (!titulo) {
-    return (
-      <div className="space-y-6">
-        <PageHeader
-          title={t('notFound.title')}
-          description={t('notFound.description')}
-          breadcrumbs={[
-            {
-              label: t('notFound.breadcrumbPayables'),
-              href: '/finance/accounts-payable/installments',
-            },
-            {
-              label: t('notFound.breadcrumbInstallments'),
-              href: '/finance/accounts-payable/installments',
-            },
-          ]}
-        />
-      </div>
-    );
-  }
-
-  const getPessoaById = (personId?: string) =>
-    pessoas.find((p) => p.id === personId);
-  const getCategoriaById = (categoryId?: string) =>
-    categorias.find((c) => c.id === categoryId);
-  const getCentroCustoById = (costCenterId?: string) =>
-    centrosCusto.find((c) => c.id === costCenterId);
-
-  const fornecedor = getPessoaById(titulo.fornecedorId);
-  const categoria = getCategoriaById(titulo.categoriaId);
-  const centroCusto = getCentroCustoById(titulo.centroCustoId);
-
-  const tagOptions = availableTags.map((tag) => ({
-    id: String(tag.id),
-    name: String(tag.nome || ''),
-    color: tag.cor,
-    usageCount:
-      typeof tag.usageCount === 'number'
-        ? tag.usageCount
-        : typeof tag.usoCount === 'number'
-          ? tag.usoCount
-          : typeof tag.count === 'number'
-            ? tag.count
-            : undefined,
-  }));
-
-  const auditEvents = logsAuditoria
-    .filter(
-      (log) => log.entidadeId === titulo.id && log.entidade === 'TituloPagar'
-    )
-    .map((log) => ({
-      id: log.id,
-      data: log.data,
-      usuarioId: log.usuarioId,
-      acao: log.acao,
-      detalhes: log.detalhes,
-      antes: log.antes,
-      depois: log.depois,
-    }));
-
-  const attachmentDetails = Array.isArray(titulo.anexosDetalhes)
-    ? titulo.anexosDetalhes
-    : (titulo.anexos || []).map((nome: string) => ({ nome }));
-
-  const handleOpenAttachment = async (fileId?: string) => {
-    if (!fileId) {
-      return;
-    }
-
-    const response = await request<{ url?: string }>({
-      url: `/file/open/${fileId}`,
-      method: 'PUT',
-    });
-
-    const url = response?.data?.url;
-    if (!url) {
-      return;
-    }
-
-    window.open(url, '_blank', 'noopener,noreferrer');
-  };
-
-  const toTagSlug = (value: string) => {
-    return value
-      .normalize('NFD')
-      .replace(/[\u0300-\u036f]/g, '')
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9]+/g, '-')
-      .replace(/(^-|-$)+/g, '');
-  };
-
-  const handleCreateTag = async (name: string) => {
-    const slug = toTagSlug(name);
-
-    if (!slug) {
-      return null;
-    }
-
-    setIsCreatingTag(true);
-    try {
-      const response = await request<{
-        id?: string | number;
-        nome?: string;
-        cor?: string;
-      }>({
-        url: '/finance/tags',
-        method: 'POST',
-        data: {
-          name: slug,
-          color: '#000000',
-        },
-      });
-
-      const created = response?.data;
-      const newTag = {
-        id: String(created?.id || `temp-${Date.now()}`),
-        nome: created?.nome || slug,
-        cor: created?.cor || '#000000',
-      };
-
-      setAvailableTags((current) => {
-        if (current.some((tag) => String(tag.id) === newTag.id)) {
-          return current;
-        }
-
-        return [...current, newTag];
-      });
-
-      showToastHandler?.('success', t('tagSelector.messages.createSuccess'));
-
-      return {
-        id: newTag.id,
-        name: newTag.nome,
-        color: newTag.cor,
-      };
-    } catch {
-      showToastHandler?.('error', t('tagSelector.messages.createError'));
-      return null;
-    } finally {
-      setIsCreatingTag(false);
-    }
-  };
-
-  const handleChangeTags = async (nextTagIds: string[]) => {
-    if (!titulo?.id) {
-      return;
-    }
-
-    try {
-      const response = await request<{ tags?: string[] }>({
-        url: `/finance/accounts-payable/installments/${titulo.id}/tags`,
-        method: 'PATCH',
-        data: {
-          tag_ids: nextTagIds.map((tagId) => Number(tagId)),
-        },
-      });
-
-      if (Array.isArray(response?.data?.tags)) {
-        setSelectedTagIds(response.data.tags);
-      } else {
-        setSelectedTagIds(nextTagIds);
-      }
-    } catch {
-      showToastHandler?.('error', t('tagSelector.messages.updateError'));
-    }
-  };
-
-  const canApprove = canApproveTitle(titulo.status);
-  const canEdit = canEditTitle(titulo.status);
-  const canCancel = canCancelTitle(titulo.status);
-  const reversibleSettlements = settlementsHistory.filter(
-    (group) =>
-      group.normal?.id &&
-      group.statusLabel === 'ATIVO' &&
-      !group.normal?.reconciled
-  );
-  const canReverse =
-    canReverseTitle(titulo.status) && reversibleSettlements.length > 0;
-
-  const getErrorMessage = (error: any, fallback: string) => {
-    const message = error?.response?.data?.message;
-
-    if (Array.isArray(message)) {
-      return message.join(', ');
-    }
-
-    if (typeof message === 'string' && message.trim()) {
-      return message;
-    }
-
-    return fallback;
-  };
-
-  const handleApprove = async () => {
-    if (!canApprove || isApproving) {
-      return;
-    }
-
-    setIsApproving(true);
-    try {
-      await request({
-        url: `/finance/accounts-payable/installments/${titulo.id}/approve`,
-        method: 'PATCH',
-      });
-
-      await refetch();
-      showToastHandler?.('success', t('messages.approveSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.approveError'))
-      );
-    } finally {
-      setIsApproving(false);
-    }
-  };
-
-  const handleSettle = async (values: SettleFormValues) => {
-    if (!canSettle || isSettling) {
-      return;
-    }
-
-    setIsSettling(true);
-    try {
-      await request({
-        url: `/finance/accounts-payable/installments/${titulo.id}/settlements`,
-        method: 'POST',
-        data: {
-          installment_id: Number(values.installmentId),
-          amount: values.amount,
-          description: values.description?.trim() || undefined,
-        },
-      });
-
-      await Promise.all([refetch(), refetchSettlementsHistory()]);
-      setIsSettleDialogOpen(false);
-      showToastHandler?.('success', t('messages.settleSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.settleError'))
-      );
-    } finally {
-      setIsSettling(false);
-    }
-  };
-
-  const handleReverseSettlement = async (
-    settlementId: string,
-    reasonOverride?: string
-  ) => {
-    if (!settlementId || reversingSettlementId) {
-      return;
-    }
-
-    setReversingSettlementId(settlementId);
-    try {
-      await request({
-        url: `/finance/settlements/${settlementId}/reverse`,
-        method: 'POST',
-        data: {
-          reason: reasonOverride?.trim() || reverseReason?.trim() || undefined,
-          memo: reasonOverride?.trim() || reverseReason?.trim() || undefined,
-        },
-      });
-
-      await Promise.all([refetch(), refetchSettlementsHistory()]);
-      setReverseReason('');
-      showToastHandler?.('success', t('messages.reverseSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.reverseError'))
-      );
-    } finally {
-      setReversingSettlementId(null);
-    }
-  };
-
-  const handleUnreconcileSettlement = async (reconciliationId: string) => {
-    if (!reconciliationId || unreconcilingId) {
-      return;
-    }
-
-    setUnreconcilingId(reconciliationId);
-    try {
-      await request({
-        url: `/finance/bank-reconciliations/${reconciliationId}`,
-        method: 'DELETE',
-      });
-
-      await Promise.all([refetch(), refetchSettlementsHistory()]);
-      showToastHandler?.('success', t('messages.unreconcileSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.unreconcileError'))
-      );
-    } finally {
-      setUnreconcilingId(null);
-    }
-  };
-
-  const toggleSettlementExpanded = (settlementId: string) => {
-    setExpandedSettlementRows((current) => ({
-      ...current,
-      [settlementId]: !current[settlementId],
-    }));
-  };
-
-  const handleCancel = async () => {
-    if (!canCancel || isCanceling) {
-      return;
-    }
-
-    setIsCanceling(true);
-    try {
-      await request({
-        url: `/finance/accounts-payable/installments/${titulo.id}/cancel`,
-        method: 'PATCH',
-        data: {},
-      });
-
-      await refetch();
-      showToastHandler?.('success', t('messages.cancelSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.cancelError'))
-      );
-    } finally {
-      setIsCanceling(false);
-    }
-  };
-
-  return (
-    <Page>
-      <PageHeader
-        title={titulo.documento}
-        description={titulo.descricao}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          {
-            label: t('breadcrumbs.payables'),
-            href: '/finance/accounts-payable/installments',
-          },
-          { label: titulo.documento },
-        ]}
-        actions={
-          <div className="flex items-center gap-2">
-            <FinanceTitleActionsMenu
-              triggerVariant="outline"
-              canEdit={canEdit}
-              canApprove={canApprove}
-              canSettle={canSettle && settleCandidates.length > 0}
-              canReverse={canReverse}
-              canCancel={canCancel}
-              isApproving={isApproving}
-              isReversing={!!reversingSettlementId}
-              isCanceling={isCanceling}
-              labels={{
-                menu: t('actions.title'),
-                srActions: t('actions.title'),
-                edit: t('actions.edit'),
-                approve: t('actions.approve'),
-                settle: t('actions.settle'),
-                reverse: t('actions.reverse'),
-                cancel: t('actions.cancel'),
-              }}
-              dialogs={{
-                cancelTitle: t('dialogs.cancel.title'),
-                cancelDescription: t('dialogs.cancel.description'),
-                cancelButton: t('dialogs.cancel.cancel'),
-                confirmCancelButton: t('dialogs.cancel.confirm'),
-                reverseTitle: t('dialogs.reverse.title'),
-                reverseDescription: t('dialogs.reverse.description'),
-                reverseReasonLabel: t('dialogs.reverse.reasonLabel'),
-                reverseReasonPlaceholder: t(
-                  'dialogs.reverse.reasonPlaceholder'
-                ),
-                reverseButton: t('dialogs.reverse.cancel'),
-                confirmReverseButton: t('dialogs.reverse.confirm'),
-              }}
-              onEdit={() =>
-                router.push(
-                  `/finance/accounts-payable/installments?editId=${titulo.id}`
-                )
-              }
-              onApprove={() => void handleApprove()}
-              onSettle={() => setIsSettleDialogOpen(true)}
-              onReverse={(reason) => {
-                const latestSettlementId = reversibleSettlements[0]?.normal?.id;
-
-                if (!latestSettlementId) {
-                  return;
-                }
-
-                return handleReverseSettlement(
-                  String(latestSettlementId),
-                  reason
-                );
-              }}
-              onCancel={() => handleCancel()}
-            />
-
-            <Sheet
-              open={isReverseDialogOpen}
-              onOpenChange={(open) => {
-                setIsReverseDialogOpen(open);
-
-                if (!open) {
-                  setSelectedSettlementIdToReverse(null);
-                  setReverseReason('');
-                }
-              }}
-            >
-              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-                <SheetHeader>
-                  <SheetTitle>{t('dialogs.reverse.title')}</SheetTitle>
-                  <SheetDescription>
-                    {t('dialogs.reverse.description')}
-                  </SheetDescription>
-                </SheetHeader>
-
-                <div className="space-y-4 px-4">
-                  <div className="space-y-2">
-                    <Label>{t('dialogs.reverse.reasonLabel')}</Label>
-                    <Input
-                      value={reverseReason}
-                      onChange={(event) => setReverseReason(event.target.value)}
-                      placeholder={t('dialogs.reverse.reasonPlaceholder')}
-                      maxLength={255}
-                      disabled={!!reversingSettlementId}
-                    />
-                  </div>
-
-                  <div className="flex flex-col gap-2">
-                    <Button
-                      disabled={
-                        !!reversingSettlementId ||
-                        !selectedSettlementIdToReverse
-                      }
-                      onClick={() => {
-                        if (!selectedSettlementIdToReverse) {
-                          return;
-                        }
-
-                        void handleReverseSettlement(
-                          selectedSettlementIdToReverse
-                        ).finally(() => {
-                          setIsReverseDialogOpen(false);
-                          setSelectedSettlementIdToReverse(null);
-                          setReverseReason('');
-                        });
-                      }}
-                    >
-                      {t('dialogs.reverse.confirm')}
-                    </Button>
-                    <Button
-                      variant="outline"
-                      disabled={!!reversingSettlementId}
-                      onClick={() => {
-                        setIsReverseDialogOpen(false);
-                        setSelectedSettlementIdToReverse(null);
-                        setReverseReason('');
-                      }}
-                    >
-                      {t('dialogs.reverse.cancel')}
-                    </Button>
-                  </div>
-                </div>
-              </SheetContent>
-            </Sheet>
-
-            <Sheet
-              open={isSettleDialogOpen}
-              onOpenChange={setIsSettleDialogOpen}
-            >
-              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-                <SheetHeader>
-                  <SheetTitle>{t('settleSheet.title')}</SheetTitle>
-                  <SheetDescription>
-                    {t('settleSheet.description')}
-                  </SheetDescription>
-                </SheetHeader>
-
-                <Form {...settleForm}>
-                  <form
-                    className="space-y-4 px-4"
-                    onSubmit={settleForm.handleSubmit(handleSettle)}
-                  >
-                    <FormField
-                      control={settleForm.control}
-                      name="installmentId"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('settleSheet.installmentLabel')}
-                          </FormLabel>
-                          <Select
-                            value={field.value}
-                            onValueChange={(value) => {
-                              field.onChange(value);
-
-                              const selected = settleCandidates.find(
-                                (parcela: any) => parcela.id === value
-                              );
-
-                              if (selected) {
-                                settleForm.setValue(
-                                  'amount',
-                                  Number(selected.valorAberto || 0),
-                                  { shouldValidate: true }
-                                );
-                              }
-                            }}
-                          >
-                            <FormControl>
-                              <SelectTrigger className="w-full">
-                                <SelectValue
-                                  placeholder={t(
-                                    'settleSheet.installmentPlaceholder'
-                                  )}
-                                />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent>
-                              {settleCandidates.map((parcela: any) => (
-                                <SelectItem key={parcela.id} value={parcela.id}>
-                                  {t('settleSheet.installmentOption', {
-                                    number: parcela.numero,
-                                    amount: new Intl.NumberFormat('pt-BR', {
-                                      style: 'currency',
-                                      currency: 'BRL',
-                                    }).format(Number(parcela.valorAberto || 0)),
-                                  })}
-                                </SelectItem>
-                              ))}
-                            </SelectContent>
-                          </Select>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <FormField
-                      control={settleForm.control}
-                      name="amount"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t('settleSheet.amountLabel')}</FormLabel>
-                          <FormControl>
-                            <InputMoney
-                              value={Number(field.value || 0)}
-                              onValueChange={(value) => {
-                                field.onChange(Number(value || 0));
-                              }}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <FormField
-                      control={settleForm.control}
-                      name="description"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('settleSheet.descriptionLabel')}
-                          </FormLabel>
-                          <FormControl>
-                            <Input {...field} value={field.value || ''} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <div className="flex flex-col gap-4">
-                      <Button
-                        className="w-full"
-                        type="submit"
-                        disabled={isSettling}
-                      >
-                        {t('settleSheet.confirm')}
-                      </Button>
-                    </div>
-                  </form>
-                </Form>
-              </SheetContent>
-            </Sheet>
-          </div>
-        }
-      />
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>{t('documentData.title')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <dl className="grid gap-4 sm:grid-cols-2">
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.supplier')}
-                </dt>
-                <dd className="mt-1">
-                  <Link
-                    href={`/cadastros/pessoas/${fornecedor?.id}`}
-                    className="hover:underline"
-                  >
-                    {fornecedor?.nome}
-                  </Link>
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.cnpjCpf')}
-                </dt>
-                <dd className="mt-1">{fornecedor?.documento}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.competency')}
-                </dt>
-                <dd className="mt-1">{titulo.competencia}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.totalValue')}
-                </dt>
-                <dd className="mt-1 text-lg font-semibold">
-                  <Money value={titulo.valorTotal} />
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.status')}
-                </dt>
-                <dd className="mt-1">
-                  <StatusBadge status={titulo.status} />
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.category')}
-                </dt>
-                <dd className="mt-1">{categoria?.nome}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.costCenter')}
-                </dt>
-                <dd className="mt-1">{centroCusto?.nome}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.createdAt')}
-                </dt>
-                <dd className="mt-1">{formatarData(titulo.criadoEm)}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.tags')}
-                </dt>
-                <dd className="mt-1">
-                  <TagSelectorSheet
-                    selectedTagIds={selectedTagIds}
-                    tags={tagOptions}
-                    onChange={handleChangeTags}
-                    onCreateTag={handleCreateTag}
-                    disabled={isCreatingTag}
-                    emptyText={t('tagSelector.noTags')}
-                    labels={{
-                      addTag: t('tagSelector.addTag'),
-                      sheetTitle: t('tagSelector.sheetTitle'),
-                      sheetDescription: t('tagSelector.sheetDescription'),
-                      createLabel: t('tagSelector.createLabel'),
-                      createPlaceholder: t('tagSelector.createPlaceholder'),
-                      createAction: t('tagSelector.createAction'),
-                      popularTitle: t('tagSelector.popularTitle'),
-                      selectedTitle: t('tagSelector.selectedTitle'),
-                      noTags: t('tagSelector.noTags'),
-                      cancel: t('tagSelector.cancel'),
-                      apply: t('tagSelector.apply'),
-                      removeTagAria: (tagName: string) =>
-                        t('tagSelector.removeTagAria', { tag: tagName }),
-                    }}
-                  />
-                </dd>
-              </div>
-            </dl>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('attachments.title')}</CardTitle>
-            <CardDescription>{t('attachments.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {attachmentDetails.length > 0 ? (
-              <ul className="space-y-2">
-                {attachmentDetails.map((anexo: any, i: number) => (
-                  <li key={i}>
-                    <Button
-                      variant="ghost"
-                      className="h-auto w-full justify-start p-2"
-                      onClick={() => void handleOpenAttachment(anexo?.id)}
-                    >
-                      <FileText className="mr-2 h-4 w-4" />
-                      {anexo?.nome}
-                    </Button>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {t('attachments.none')}
-              </p>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="parcelas">
-        <TabsList>
-          <TabsTrigger value="parcelas">{t('tabs.installments')}</TabsTrigger>
-          <TabsTrigger value="liquidacoes">{t('tabs.settlements')}</TabsTrigger>
-          <TabsTrigger value="auditoria">{t('tabs.audit')}</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="parcelas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('installmentsTable.installment')}</TableHead>
-                    <TableHead>{t('installmentsTable.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('installmentsTable.value')}
-                    </TableHead>
-                    <TableHead>{t('installmentsTable.method')}</TableHead>
-                    <TableHead>{t('installmentsTable.status')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {titulo.parcelas.map((parcela: any) => (
-                    <TableRow key={parcela.id}>
-                      <TableCell>
-                        {parcela.numero}/{titulo.parcelas.length}
-                      </TableCell>
-                      <TableCell>{formatarData(parcela.vencimento)}</TableCell>
-                      <TableCell className="text-right">
-                        <Money value={parcela.valor} />
-                      </TableCell>
-                      <TableCell className="capitalize">
-                        {parcela.metodoPagamento}
-                      </TableCell>
-                      <TableCell>
-                        <StatusBadge status={parcela.status} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="liquidacoes" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              {isFetchingSettlementsHistory ? (
-                <div className="flex items-center justify-center py-8 text-muted-foreground">
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('settlementsHistory.loading')}
-                </div>
-              ) : settlementsHistory.length > 0 ? (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>
-                        {t('settlementsHistory.headers.date')}
-                      </TableHead>
-                      <TableHead>
-                        {t('settlementsHistory.headers.type')}
-                      </TableHead>
-                      <TableHead>
-                        {t('settlementsHistory.headers.status')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsHistory.headers.netAmount')}
-                      </TableHead>
-                      <TableHead>
-                        {t('settlementsHistory.headers.method')}
-                      </TableHead>
-                      <TableHead>
-                        {t('settlementsHistory.headers.account')}
-                      </TableHead>
-                      <TableHead>
-                        {t('settlementsHistory.headers.reconciled')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsHistory.headers.actions')}
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {settlementsHistory.map((group) => {
-                      const normalId = group.normal.id;
-                      const isExpanded = !!expandedSettlementRows[normalId];
-                      const canReverseNormal =
-                        group.statusLabel === 'ATIVO' &&
-                        !group.normal.reconciled &&
-                        !reversingSettlementId;
-
-                      return (
-                        <Fragment key={normalId}>
-                          <TableRow>
-                            <TableCell>
-                              {formatarData(group.normal.paidAt)}
-                            </TableCell>
-                            <TableCell>
-                              <span className="rounded-md border px-2 py-1 text-xs font-medium">
-                                {t('settlementsHistory.normalType')}
-                              </span>
-                            </TableCell>
-                            <TableCell>
-                              <span
-                                className={`rounded-md px-2 py-1 text-xs font-medium ${
-                                  group.statusLabel === 'ESTORNADO'
-                                    ? 'bg-muted text-muted-foreground'
-                                    : 'bg-primary/10 text-primary'
-                                }`}
-                              >
-                                {group.statusLabel}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-right font-medium">
-                              +
-                              <Money
-                                value={
-                                  Math.abs(group.normal.amountCents || 0) / 100
-                                }
-                              />
-                            </TableCell>
-                            <TableCell className="capitalize">
-                              {group.normal.method || '-'}
-                            </TableCell>
-                            <TableCell>{group.normal.account || '-'}</TableCell>
-                            <TableCell>
-                              <span
-                                className={`rounded-md px-2 py-1 text-xs font-medium ${
-                                  group.normal.reconciled
-                                    ? 'bg-primary/10 text-primary'
-                                    : 'bg-muted text-muted-foreground'
-                                }`}
-                              >
-                                {group.normal.reconciled
-                                  ? t('settlementsHistory.reconciled.yes')
-                                  : t('settlementsHistory.reconciled.no')}
-                              </span>
-                            </TableCell>
-                            <TableCell className="text-right">
-                              <div className="flex items-center justify-end gap-2">
-                                {group.normal.reconciled &&
-                                group.normal.reconciliationId ? (
-                                  <Button
-                                    variant="outline"
-                                    size="sm"
-                                    disabled={
-                                      unreconcilingId ===
-                                      group.normal.reconciliationId
-                                    }
-                                    onClick={() =>
-                                      void handleUnreconcileSettlement(
-                                        String(group.normal.reconciliationId)
-                                      )
-                                    }
-                                  >
-                                    {unreconcilingId ===
-                                    group.normal.reconciliationId
-                                      ? t(
-                                          'settlementsHistory.unreconcileLoading'
-                                        )
-                                      : t('settlementsHistory.unreconcile')}
-                                  </Button>
-                                ) : null}
-
-                                <Button
-                                  variant="outline"
-                                  size="sm"
-                                  title={
-                                    group.normal.reconciled
-                                      ? t('settlementsHistory.unreconcileFirst')
-                                      : undefined
-                                  }
-                                  disabled={!canReverseNormal}
-                                  onClick={() => {
-                                    setSelectedSettlementIdToReverse(normalId);
-                                    setReverseReason('');
-                                    setIsReverseDialogOpen(true);
-                                  }}
-                                >
-                                  <Undo className="mr-2 h-4 w-4" />
-                                  {t('settlementsHistory.reverse')}
-                                </Button>
-
-                                <Button
-                                  variant="ghost"
-                                  size="sm"
-                                  onClick={() =>
-                                    toggleSettlementExpanded(normalId)
-                                  }
-                                >
-                                  {isExpanded ? (
-                                    <ChevronUp className="h-4 w-4" />
-                                  ) : (
-                                    <ChevronDown className="h-4 w-4" />
-                                  )}
-                                </Button>
-                              </div>
-                            </TableCell>
-                          </TableRow>
-
-                          {group.reversal ? (
-                            <TableRow>
-                              <TableCell className="pl-8">
-                                {formatarData(group.reversal.paidAt)}
-                              </TableCell>
-                              <TableCell>
-                                <span className="rounded-md border px-2 py-1 text-xs font-medium">
-                                  {t('settlementsHistory.reversalType')}
-                                </span>
-                              </TableCell>
-                              <TableCell>
-                                <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
-                                  {t('settlementsHistory.reversedStatus')}
-                                </span>
-                              </TableCell>
-                              <TableCell className="text-right font-medium text-destructive">
-                                -
-                                <Money
-                                  value={
-                                    Math.abs(group.reversal.amountCents || 0) /
-                                    100
-                                  }
-                                />
-                              </TableCell>
-                              <TableCell>-</TableCell>
-                              <TableCell>-</TableCell>
-                              <TableCell>-</TableCell>
-                              <TableCell className="text-right text-xs text-muted-foreground">
-                                {group.reversal.memo || '-'}
-                              </TableCell>
-                            </TableRow>
-                          ) : null}
-
-                          {isExpanded ? (
-                            <TableRow>
-                              <TableCell colSpan={8}>
-                                <div className="rounded-md border bg-muted/20 p-3">
-                                  <p className="mb-2 text-xs font-medium text-muted-foreground">
-                                    {t('settlementsHistory.allocationsTitle')}
-                                  </p>
-                                  <div className="space-y-1">
-                                    {group.allocations.map((allocation) => (
-                                      <div
-                                        key={`${normalId}-${allocation.installmentId}`}
-                                        className="flex items-center justify-between text-sm"
-                                      >
-                                        <span>
-                                          {t(
-                                            'settlementsHistory.allocationInstallment'
-                                          )}{' '}
-                                          #{allocation.installmentSeq}
-                                        </span>
-                                        <span className="font-medium">
-                                          +
-                                          <Money
-                                            value={
-                                              Math.abs(
-                                                Number(
-                                                  allocation.amountCents || 0
-                                                )
-                                              ) / 100
-                                            }
-                                          />
-                                        </span>
-                                      </div>
-                                    ))}
-                                  </div>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          ) : null}
-                        </Fragment>
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              ) : (
-                <p className="text-center text-muted-foreground py-8">
-                  {t('settlementsTable.none')}
-                </p>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="auditoria" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              {auditEvents.length > 0 ? (
-                <AuditTimeline events={auditEvents} />
-              ) : (
-                <p className="text-center text-muted-foreground py-8">
-                  {t('audit.none')}
-                </p>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </Page>
-  );
-}
+'use client';
+
+import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
+import { Page, PageHeader } from '@/components/entity-list';
+import { AuditTimeline } from '@/components/ui/audit-timeline';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ChevronDown, ChevronUp, FileText, Loader2, Undo } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { formatarData } from '../../../_lib/formatters';
+import {
+  canApproveTitle,
+  canCancelTitle,
+  canEditTitle,
+  canReverseTitle,
+  canSettleTitle,
+} from '../../../_lib/title-action-rules';
+import { useFinanceData } from '../../../_lib/use-finance-data';
+
+type SettleFormValues = {
+  installmentId: string;
+  amount: number;
+  description?: string;
+};
+
+type SettlementHistoryAllocation = {
+  installmentId: string;
+  installmentSeq: number;
+  amountCents: number;
+};
+
+type SettlementHistoryItem = {
+  normal: {
+    id: string;
+    paidAt: string | null;
+    amountCents: number;
+    type: 'NORMAL';
+    method?: string | null;
+    account?: string | null;
+    accountId?: string | null;
+    createdAt?: string | null;
+    createdBy?: string | null;
+    memo?: string | null;
+    reconciled: boolean;
+    reconciliationId?: string | null;
+  };
+  reversal?: {
+    id: string;
+    paidAt: string | null;
+    amountCents: number;
+    type: 'REVERSAL';
+    createdAt?: string | null;
+    createdBy?: string | null;
+    memo?: string | null;
+  } | null;
+  allocations: SettlementHistoryAllocation[];
+  statusLabel: 'ATIVO' | 'ESTORNADO';
+};
+
+export default function TituloDetalhePage() {
+  const t = useTranslations('finance.PayableInstallmentDetailPage');
+  const settleSchema = useMemo(
+    () =>
+      z.object({
+        installmentId: z.string().min(1, t('validation.installmentRequired')),
+        amount: z.number().min(0.01, t('validation.amountGreaterThanZero')),
+        description: z.string().optional(),
+      }),
+    [t]
+  );
+  const { request, showToastHandler } = useApp();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+  const { data, refetch } = useFinanceData();
+  const {
+    titulosPagar,
+    pessoas,
+    categorias,
+    centrosCusto,
+    logsAuditoria,
+    tags,
+  } = data;
+
+  const titulo = titulosPagar.find((t) => t.id === id);
+
+  const {
+    data: settlementsHistory = [],
+    refetch: refetchSettlementsHistory,
+    isFetching: isFetchingSettlementsHistory,
+  } = useQuery<SettlementHistoryItem[]>({
+    queryKey: ['finance-title-settlements-history', id],
+    enabled: !!id,
+    queryFn: async () => {
+      const response = await request<SettlementHistoryItem[]>({
+        url: `/finance/titles/${id}/settlements-history`,
+        method: 'GET',
+      });
+
+      return (response.data || []) as SettlementHistoryItem[];
+    },
+    placeholderData: (old) => old,
+  });
+
+  const canSettle = canSettleTitle(titulo?.status);
+
+  const settleCandidates = (titulo?.parcelas || []).filter(
+    (parcela: any) =>
+      parcela.status === 'aberto' ||
+      parcela.status === 'parcial' ||
+      parcela.status === 'vencido'
+  );
+
+  const settleForm = useForm<SettleFormValues>({
+    resolver: zodResolver(settleSchema),
+    defaultValues: {
+      installmentId: settleCandidates[0]?.id || '',
+      amount: Number(settleCandidates[0]?.valorAberto || 0),
+      description: '',
+    },
+  });
+
+  const [availableTags, setAvailableTags] = useState<any[]>([]);
+  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
+  const [isCreatingTag, setIsCreatingTag] = useState(false);
+  const [isApproving, setIsApproving] = useState(false);
+  const [isSettling, setIsSettling] = useState(false);
+  const [isCanceling, setIsCanceling] = useState(false);
+  const [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
+  const [isReverseDialogOpen, setIsReverseDialogOpen] = useState(false);
+  const [selectedSettlementIdToReverse, setSelectedSettlementIdToReverse] =
+    useState<string | null>(null);
+  const [reverseReason, setReverseReason] = useState('');
+  const [reversingSettlementId, setReversingSettlementId] = useState<
+    string | null
+  >(null);
+  const [unreconcilingId, setUnreconcilingId] = useState<string | null>(null);
+  const [expandedSettlementRows, setExpandedSettlementRows] = useState<
+    Record<string, boolean>
+  >({});
+
+  useEffect(() => {
+    setAvailableTags(tags || []);
+  }, [tags]);
+
+  useEffect(() => {
+    if (!titulo) {
+      return;
+    }
+
+    setSelectedTagIds(Array.isArray(titulo.tags) ? titulo.tags : []);
+  }, [titulo]);
+
+  useEffect(() => {
+    const firstCandidate = settleCandidates[0];
+    const nextInstallmentId = firstCandidate?.id || '';
+    const nextAmount = Number(firstCandidate?.valorAberto || 0);
+    const currentInstallmentId = settleForm.getValues('installmentId') || '';
+    const currentAmount = Number(settleForm.getValues('amount') || 0);
+
+    if (
+      currentInstallmentId === nextInstallmentId &&
+      currentAmount === nextAmount
+    ) {
+      return;
+    }
+
+    settleForm.reset({
+      installmentId: nextInstallmentId,
+      amount: nextAmount,
+      description: '',
+    });
+  }, [settleForm, settleCandidates]);
+
+  useEffect(() => {
+    const action = searchParams.get('action');
+
+    if (action !== 'settle') {
+      return;
+    }
+
+    if (canSettle && settleCandidates.length > 0) {
+      setIsSettleDialogOpen(true);
+    }
+  }, [canSettle, searchParams, settleCandidates.length]);
+
+  if (!titulo) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title={t('notFound.title')}
+          description={t('notFound.description')}
+          breadcrumbs={[
+            {
+              label: t('notFound.breadcrumbPayables'),
+              href: '/finance/accounts-payable/installments',
+            },
+            {
+              label: t('notFound.breadcrumbInstallments'),
+              href: '/finance/accounts-payable/installments',
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+
+  const getPessoaById = (personId?: string) =>
+    pessoas.find((p) => p.id === personId);
+  const getCategoriaById = (categoryId?: string) =>
+    categorias.find((c) => c.id === categoryId);
+  const getCentroCustoById = (costCenterId?: string) =>
+    centrosCusto.find((c) => c.id === costCenterId);
+
+  const fornecedor = getPessoaById(titulo.fornecedorId);
+  const categoria = getCategoriaById(titulo.categoriaId);
+  const centroCusto = getCentroCustoById(titulo.centroCustoId);
+
+  const tagOptions = availableTags.map((tag) => ({
+    id: String(tag.id),
+    name: String(tag.nome || ''),
+    color: tag.cor,
+    usageCount:
+      typeof tag.usageCount === 'number'
+        ? tag.usageCount
+        : typeof tag.usoCount === 'number'
+          ? tag.usoCount
+          : typeof tag.count === 'number'
+            ? tag.count
+            : undefined,
+  }));
+
+  const auditEvents = logsAuditoria
+    .filter(
+      (log) => log.entidadeId === titulo.id && log.entidade === 'TituloPagar'
+    )
+    .map((log) => ({
+      id: log.id,
+      data: log.data,
+      usuarioId: log.usuarioId,
+      acao: log.acao,
+      detalhes: log.detalhes,
+      antes: log.antes,
+      depois: log.depois,
+    }));
+
+  const attachmentDetails = Array.isArray(titulo.anexosDetalhes)
+    ? titulo.anexosDetalhes
+    : (titulo.anexos || []).map((nome: string) => ({ nome }));
+
+  const handleOpenAttachment = async (fileId?: string) => {
+    if (!fileId) {
+      return;
+    }
+
+    const response = await request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    });
+
+    const url = response?.data?.url;
+    if (!url) {
+      return;
+    }
+
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const toTagSlug = (value: string) => {
+    return value
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)+/g, '');
+  };
+
+  const handleCreateTag = async (name: string) => {
+    const slug = toTagSlug(name);
+
+    if (!slug) {
+      return null;
+    }
+
+    setIsCreatingTag(true);
+    try {
+      const response = await request<{
+        id?: string | number;
+        nome?: string;
+        cor?: string;
+      }>({
+        url: '/finance/tags',
+        method: 'POST',
+        data: {
+          name: slug,
+          color: '#000000',
+        },
+      });
+
+      const created = response?.data;
+      const newTag = {
+        id: String(created?.id || `temp-${Date.now()}`),
+        nome: created?.nome || slug,
+        cor: created?.cor || '#000000',
+      };
+
+      setAvailableTags((current) => {
+        if (current.some((tag) => String(tag.id) === newTag.id)) {
+          return current;
+        }
+
+        return [...current, newTag];
+      });
+
+      showToastHandler?.('success', t('tagSelector.messages.createSuccess'));
+
+      return {
+        id: newTag.id,
+        name: newTag.nome,
+        color: newTag.cor,
+      };
+    } catch {
+      showToastHandler?.('error', t('tagSelector.messages.createError'));
+      return null;
+    } finally {
+      setIsCreatingTag(false);
+    }
+  };
+
+  const handleChangeTags = async (nextTagIds: string[]) => {
+    if (!titulo?.id) {
+      return;
+    }
+
+    try {
+      const response = await request<{ tags?: string[] }>({
+        url: `/finance/accounts-payable/installments/${titulo.id}/tags`,
+        method: 'PATCH',
+        data: {
+          tag_ids: nextTagIds.map((tagId) => Number(tagId)),
+        },
+      });
+
+      if (Array.isArray(response?.data?.tags)) {
+        setSelectedTagIds(response.data.tags);
+      } else {
+        setSelectedTagIds(nextTagIds);
+      }
+    } catch {
+      showToastHandler?.('error', t('tagSelector.messages.updateError'));
+    }
+  };
+
+  const canApprove = canApproveTitle(titulo.status);
+  const canEdit = canEditTitle(titulo.status);
+  const canCancel = canCancelTitle(titulo.status);
+  const reversibleSettlements = settlementsHistory.filter(
+    (group) =>
+      group.normal?.id &&
+      group.statusLabel === 'ATIVO' &&
+      !group.normal?.reconciled
+  );
+  const canReverse =
+    canReverseTitle(titulo.status) && reversibleSettlements.length > 0;
+
+  const getErrorMessage = (error: any, fallback: string) => {
+    const message = error?.response?.data?.message;
+
+    if (Array.isArray(message)) {
+      return message.join(', ');
+    }
+
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+
+    return fallback;
+  };
+
+  const handleApprove = async () => {
+    if (!canApprove || isApproving) {
+      return;
+    }
+
+    setIsApproving(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/approve`,
+        method: 'PATCH',
+      });
+
+      await refetch();
+      showToastHandler?.('success', t('messages.approveSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.approveError'))
+      );
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+  const handleSettle = async (values: SettleFormValues) => {
+    if (!canSettle || isSettling) {
+      return;
+    }
+
+    setIsSettling(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/settlements`,
+        method: 'POST',
+        data: {
+          installment_id: Number(values.installmentId),
+          amount: values.amount,
+          description: values.description?.trim() || undefined,
+        },
+      });
+
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      setIsSettleDialogOpen(false);
+      showToastHandler?.('success', t('messages.settleSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.settleError'))
+      );
+    } finally {
+      setIsSettling(false);
+    }
+  };
+
+  const handleReverseSettlement = async (
+    settlementId: string,
+    reasonOverride?: string
+  ) => {
+    if (!settlementId || reversingSettlementId) {
+      return;
+    }
+
+    setReversingSettlementId(settlementId);
+    try {
+      await request({
+        url: `/finance/settlements/${settlementId}/reverse`,
+        method: 'POST',
+        data: {
+          reason: reasonOverride?.trim() || reverseReason?.trim() || undefined,
+          memo: reasonOverride?.trim() || reverseReason?.trim() || undefined,
+        },
+      });
+
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      setReverseReason('');
+      showToastHandler?.('success', t('messages.reverseSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.reverseError'))
+      );
+    } finally {
+      setReversingSettlementId(null);
+    }
+  };
+
+  const handleUnreconcileSettlement = async (reconciliationId: string) => {
+    if (!reconciliationId || unreconcilingId) {
+      return;
+    }
+
+    setUnreconcilingId(reconciliationId);
+    try {
+      await request({
+        url: `/finance/bank-reconciliations/${reconciliationId}`,
+        method: 'DELETE',
+      });
+
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      showToastHandler?.('success', t('messages.unreconcileSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.unreconcileError'))
+      );
+    } finally {
+      setUnreconcilingId(null);
+    }
+  };
+
+  const toggleSettlementExpanded = (settlementId: string) => {
+    setExpandedSettlementRows((current) => ({
+      ...current,
+      [settlementId]: !current[settlementId],
+    }));
+  };
+
+  const handleCancel = async () => {
+    if (!canCancel || isCanceling) {
+      return;
+    }
+
+    setIsCanceling(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/cancel`,
+        method: 'PATCH',
+        data: {},
+      });
+
+      await refetch();
+      showToastHandler?.('success', t('messages.cancelSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.cancelError'))
+      );
+    } finally {
+      setIsCanceling(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={titulo.documento}
+        description={titulo.descricao}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.payables'),
+            href: '/finance/accounts-payable/installments',
+          },
+          { label: titulo.documento },
+        ]}
+        actions={
+          <div className="flex items-center gap-2">
+            <FinanceTitleActionsMenu
+              triggerVariant="outline"
+              canEdit={canEdit}
+              canApprove={canApprove}
+              canSettle={canSettle && settleCandidates.length > 0}
+              canReverse={canReverse}
+              canCancel={canCancel}
+              isApproving={isApproving}
+              isReversing={!!reversingSettlementId}
+              isCanceling={isCanceling}
+              labels={{
+                menu: t('actions.title'),
+                srActions: t('actions.title'),
+                edit: t('actions.edit'),
+                approve: t('actions.approve'),
+                settle: t('actions.settle'),
+                reverse: t('actions.reverse'),
+                cancel: t('actions.cancel'),
+              }}
+              dialogs={{
+                cancelTitle: t('dialogs.cancel.title'),
+                cancelDescription: t('dialogs.cancel.description'),
+                cancelButton: t('dialogs.cancel.cancel'),
+                confirmCancelButton: t('dialogs.cancel.confirm'),
+                reverseTitle: t('dialogs.reverse.title'),
+                reverseDescription: t('dialogs.reverse.description'),
+                reverseReasonLabel: t('dialogs.reverse.reasonLabel'),
+                reverseReasonPlaceholder: t(
+                  'dialogs.reverse.reasonPlaceholder'
+                ),
+                reverseButton: t('dialogs.reverse.cancel'),
+                confirmReverseButton: t('dialogs.reverse.confirm'),
+              }}
+              onEdit={() =>
+                router.push(
+                  `/finance/accounts-payable/installments?editId=${titulo.id}`
+                )
+              }
+              onApprove={() => void handleApprove()}
+              onSettle={() => setIsSettleDialogOpen(true)}
+              onReverse={(reason) => {
+                const latestSettlementId = reversibleSettlements[0]?.normal?.id;
+
+                if (!latestSettlementId) {
+                  return;
+                }
+
+                return handleReverseSettlement(
+                  String(latestSettlementId),
+                  reason
+                );
+              }}
+              onCancel={() => handleCancel()}
+            />
+
+            <Sheet
+              open={isReverseDialogOpen}
+              onOpenChange={(open) => {
+                setIsReverseDialogOpen(open);
+
+                if (!open) {
+                  setSelectedSettlementIdToReverse(null);
+                  setReverseReason('');
+                }
+              }}
+            >
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>{t('dialogs.reverse.title')}</SheetTitle>
+                  <SheetDescription>
+                    {t('dialogs.reverse.description')}
+                  </SheetDescription>
+                </SheetHeader>
+
+                <div className="space-y-4 px-4">
+                  <div className="space-y-2">
+                    <Label>{t('dialogs.reverse.reasonLabel')}</Label>
+                    <Input
+                      value={reverseReason}
+                      onChange={(event) => setReverseReason(event.target.value)}
+                      placeholder={t('dialogs.reverse.reasonPlaceholder')}
+                      maxLength={255}
+                      disabled={!!reversingSettlementId}
+                    />
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    <Button
+                      disabled={
+                        !!reversingSettlementId ||
+                        !selectedSettlementIdToReverse
+                      }
+                      onClick={() => {
+                        if (!selectedSettlementIdToReverse) {
+                          return;
+                        }
+
+                        void handleReverseSettlement(
+                          selectedSettlementIdToReverse
+                        ).finally(() => {
+                          setIsReverseDialogOpen(false);
+                          setSelectedSettlementIdToReverse(null);
+                          setReverseReason('');
+                        });
+                      }}
+                    >
+                      {t('dialogs.reverse.confirm')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      disabled={!!reversingSettlementId}
+                      onClick={() => {
+                        setIsReverseDialogOpen(false);
+                        setSelectedSettlementIdToReverse(null);
+                        setReverseReason('');
+                      }}
+                    >
+                      {t('dialogs.reverse.cancel')}
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
+
+            <Sheet
+              open={isSettleDialogOpen}
+              onOpenChange={setIsSettleDialogOpen}
+            >
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>{t('settleSheet.title')}</SheetTitle>
+                  <SheetDescription>
+                    {t('settleSheet.description')}
+                  </SheetDescription>
+                </SheetHeader>
+
+                <Form {...settleForm}>
+                  <form
+                    className="space-y-4 px-4"
+                    onSubmit={settleForm.handleSubmit(handleSettle)}
+                  >
+                    <FormField
+                      control={settleForm.control}
+                      name="installmentId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('settleSheet.installmentLabel')}
+                          </FormLabel>
+                          <Select
+                            value={field.value}
+                            onValueChange={(value) => {
+                              field.onChange(value);
+
+                              const selected = settleCandidates.find(
+                                (parcela: any) => parcela.id === value
+                              );
+
+                              if (selected) {
+                                settleForm.setValue(
+                                  'amount',
+                                  Number(selected.valorAberto || 0),
+                                  { shouldValidate: true }
+                                );
+                              }
+                            }}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <SelectValue
+                                  placeholder={t(
+                                    'settleSheet.installmentPlaceholder'
+                                  )}
+                                />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {settleCandidates.map((parcela: any) => (
+                                <SelectItem key={parcela.id} value={parcela.id}>
+                                  {t('settleSheet.installmentOption', {
+                                    number: parcela.numero,
+                                    amount: new Intl.NumberFormat('pt-BR', {
+                                      style: 'currency',
+                                      currency: 'BRL',
+                                    }).format(Number(parcela.valorAberto || 0)),
+                                  })}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={settleForm.control}
+                      name="amount"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t('settleSheet.amountLabel')}</FormLabel>
+                          <FormControl>
+                            <InputMoney
+                              value={Number(field.value || 0)}
+                              onValueChange={(value) => {
+                                field.onChange(Number(value || 0));
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={settleForm.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('settleSheet.descriptionLabel')}
+                          </FormLabel>
+                          <FormControl>
+                            <Input {...field} value={field.value || ''} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <div className="flex flex-col gap-4">
+                      <Button
+                        className="w-full"
+                        type="submit"
+                        disabled={isSettling}
+                      >
+                        {t('settleSheet.confirm')}
+                      </Button>
+                    </div>
+                  </form>
+                </Form>
+              </SheetContent>
+            </Sheet>
+          </div>
+        }
+      />
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>{t('documentData.title')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.supplier')}
+                </dt>
+                <dd className="mt-1">
+                  <Link
+                    href={`/cadastros/pessoas/${fornecedor?.id}`}
+                    className="hover:underline"
+                  >
+                    {fornecedor?.nome}
+                  </Link>
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.cnpjCpf')}
+                </dt>
+                <dd className="mt-1">{fornecedor?.documento}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.competency')}
+                </dt>
+                <dd className="mt-1">{titulo.competencia}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.totalValue')}
+                </dt>
+                <dd className="mt-1 text-lg font-semibold">
+                  <Money value={titulo.valorTotal} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.status')}
+                </dt>
+                <dd className="mt-1">
+                  <StatusBadge status={titulo.status} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.category')}
+                </dt>
+                <dd className="mt-1">{categoria?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.costCenter')}
+                </dt>
+                <dd className="mt-1">{centroCusto?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.createdAt')}
+                </dt>
+                <dd className="mt-1">{formatarData(titulo.criadoEm)}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.tags')}
+                </dt>
+                <dd className="mt-1">
+                  <TagSelectorSheet
+                    selectedTagIds={selectedTagIds}
+                    tags={tagOptions}
+                    onChange={handleChangeTags}
+                    onCreateTag={handleCreateTag}
+                    disabled={isCreatingTag}
+                    emptyText={t('tagSelector.noTags')}
+                    labels={{
+                      addTag: t('tagSelector.addTag'),
+                      sheetTitle: t('tagSelector.sheetTitle'),
+                      sheetDescription: t('tagSelector.sheetDescription'),
+                      createLabel: t('tagSelector.createLabel'),
+                      createPlaceholder: t('tagSelector.createPlaceholder'),
+                      createAction: t('tagSelector.createAction'),
+                      popularTitle: t('tagSelector.popularTitle'),
+                      selectedTitle: t('tagSelector.selectedTitle'),
+                      noTags: t('tagSelector.noTags'),
+                      cancel: t('tagSelector.cancel'),
+                      apply: t('tagSelector.apply'),
+                      removeTagAria: (tagName: string) =>
+                        t('tagSelector.removeTagAria', { tag: tagName }),
+                    }}
+                  />
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('attachments.title')}</CardTitle>
+            <CardDescription>{t('attachments.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {attachmentDetails.length > 0 ? (
+              <ul className="space-y-2">
+                {attachmentDetails.map((anexo: any, i: number) => (
+                  <li key={i}>
+                    <Button
+                      variant="ghost"
+                      className="h-auto w-full justify-start p-2"
+                      onClick={() => void handleOpenAttachment(anexo?.id)}
+                    >
+                      <FileText className="mr-2 h-4 w-4" />
+                      {anexo?.nome}
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('attachments.none')}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="parcelas">
+        <TabsList>
+          <TabsTrigger value="parcelas">{t('tabs.installments')}</TabsTrigger>
+          <TabsTrigger value="liquidacoes">{t('tabs.settlements')}</TabsTrigger>
+          <TabsTrigger value="auditoria">{t('tabs.audit')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="parcelas" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('installmentsTable.installment')}</TableHead>
+                    <TableHead>{t('installmentsTable.dueDate')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('installmentsTable.value')}
+                    </TableHead>
+                    <TableHead>{t('installmentsTable.method')}</TableHead>
+                    <TableHead>{t('installmentsTable.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {titulo.parcelas.map((parcela: any) => (
+                    <TableRow key={parcela.id}>
+                      <TableCell>
+                        {parcela.numero}/{titulo.parcelas.length}
+                      </TableCell>
+                      <TableCell>{formatarData(parcela.vencimento)}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={parcela.valor} />
+                      </TableCell>
+                      <TableCell className="capitalize">
+                        {parcela.metodoPagamento}
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={parcela.status} />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="liquidacoes" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {isFetchingSettlementsHistory ? (
+                <div className="flex items-center justify-center py-8 text-muted-foreground">
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  {t('settlementsHistory.loading')}
+                </div>
+              ) : settlementsHistory.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>
+                        {t('settlementsHistory.headers.date')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.type')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.status')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsHistory.headers.netAmount')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.method')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.account')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.reconciled')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsHistory.headers.actions')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {settlementsHistory.map((group) => {
+                      const normalId = group.normal.id;
+                      const isExpanded = !!expandedSettlementRows[normalId];
+                      const canReverseNormal =
+                        group.statusLabel === 'ATIVO' &&
+                        !group.normal.reconciled &&
+                        !reversingSettlementId;
+
+                      return (
+                        <Fragment key={normalId}>
+                          <TableRow>
+                            <TableCell>
+                              {formatarData(group.normal.paidAt)}
+                            </TableCell>
+                            <TableCell>
+                              <span className="rounded-md border px-2 py-1 text-xs font-medium">
+                                {t('settlementsHistory.normalType')}
+                              </span>
+                            </TableCell>
+                            <TableCell>
+                              <span
+                                className={`rounded-md px-2 py-1 text-xs font-medium ${
+                                  group.statusLabel === 'ESTORNADO'
+                                    ? 'bg-muted text-muted-foreground'
+                                    : 'bg-primary/10 text-primary'
+                                }`}
+                              >
+                                {group.statusLabel}
+                              </span>
+                            </TableCell>
+                            <TableCell className="text-right font-medium">
+                              +
+                              <Money
+                                value={
+                                  Math.abs(group.normal.amountCents || 0) / 100
+                                }
+                              />
+                            </TableCell>
+                            <TableCell className="capitalize">
+                              {group.normal.method || '-'}
+                            </TableCell>
+                            <TableCell>{group.normal.account || '-'}</TableCell>
+                            <TableCell>
+                              <span
+                                className={`rounded-md px-2 py-1 text-xs font-medium ${
+                                  group.normal.reconciled
+                                    ? 'bg-primary/10 text-primary'
+                                    : 'bg-muted text-muted-foreground'
+                                }`}
+                              >
+                                {group.normal.reconciled
+                                  ? t('settlementsHistory.reconciled.yes')
+                                  : t('settlementsHistory.reconciled.no')}
+                              </span>
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <div className="flex items-center justify-end gap-2">
+                                {group.normal.reconciled &&
+                                group.normal.reconciliationId ? (
+                                  <Button
+                                    variant="outline"
+                                    size="sm"
+                                    disabled={
+                                      unreconcilingId ===
+                                      group.normal.reconciliationId
+                                    }
+                                    onClick={() =>
+                                      void handleUnreconcileSettlement(
+                                        String(group.normal.reconciliationId)
+                                      )
+                                    }
+                                  >
+                                    {unreconcilingId ===
+                                    group.normal.reconciliationId
+                                      ? t(
+                                          'settlementsHistory.unreconcileLoading'
+                                        )
+                                      : t('settlementsHistory.unreconcile')}
+                                  </Button>
+                                ) : null}
+
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  title={
+                                    group.normal.reconciled
+                                      ? t('settlementsHistory.unreconcileFirst')
+                                      : undefined
+                                  }
+                                  disabled={!canReverseNormal}
+                                  onClick={() => {
+                                    setSelectedSettlementIdToReverse(normalId);
+                                    setReverseReason('');
+                                    setIsReverseDialogOpen(true);
+                                  }}
+                                >
+                                  <Undo className="mr-2 h-4 w-4" />
+                                  {t('settlementsHistory.reverse')}
+                                </Button>
+
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={() =>
+                                    toggleSettlementExpanded(normalId)
+                                  }
+                                >
+                                  {isExpanded ? (
+                                    <ChevronUp className="h-4 w-4" />
+                                  ) : (
+                                    <ChevronDown className="h-4 w-4" />
+                                  )}
+                                </Button>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+
+                          {group.reversal ? (
+                            <TableRow>
+                              <TableCell className="pl-8">
+                                {formatarData(group.reversal.paidAt)}
+                              </TableCell>
+                              <TableCell>
+                                <span className="rounded-md border px-2 py-1 text-xs font-medium">
+                                  {t('settlementsHistory.reversalType')}
+                                </span>
+                              </TableCell>
+                              <TableCell>
+                                <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+                                  {t('settlementsHistory.reversedStatus')}
+                                </span>
+                              </TableCell>
+                              <TableCell className="text-right font-medium text-destructive">
+                                -
+                                <Money
+                                  value={
+                                    Math.abs(group.reversal.amountCents || 0) /
+                                    100
+                                  }
+                                />
+                              </TableCell>
+                              <TableCell>-</TableCell>
+                              <TableCell>-</TableCell>
+                              <TableCell>-</TableCell>
+                              <TableCell className="text-right text-xs text-muted-foreground">
+                                {group.reversal.memo || '-'}
+                              </TableCell>
+                            </TableRow>
+                          ) : null}
+
+                          {isExpanded ? (
+                            <TableRow>
+                              <TableCell colSpan={8}>
+                                <div className="rounded-md border bg-muted/20 p-3">
+                                  <p className="mb-2 text-xs font-medium text-muted-foreground">
+                                    {t('settlementsHistory.allocationsTitle')}
+                                  </p>
+                                  <div className="space-y-1">
+                                    {group.allocations.map((allocation) => (
+                                      <div
+                                        key={`${normalId}-${allocation.installmentId}`}
+                                        className="flex items-center justify-between text-sm"
+                                      >
+                                        <span>
+                                          {t(
+                                            'settlementsHistory.allocationInstallment'
+                                          )}{' '}
+                                          #{allocation.installmentSeq}
+                                        </span>
+                                        <span className="font-medium">
+                                          +
+                                          <Money
+                                            value={
+                                              Math.abs(
+                                                Number(
+                                                  allocation.amountCents || 0
+                                                )
+                                              ) / 100
+                                            }
+                                          />
+                                        </span>
+                                      </div>
+                                    ))}
+                                  </div>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          ) : null}
+                        </Fragment>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('settlementsTable.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="auditoria" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {auditEvents.length > 0 ? (
+                <AuditTimeline events={auditEvents} />
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('audit.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}