@hed-hog/finance 0.0.251 → 0.0.253

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

@@ -10,7 +10,6 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
 import { AuditTimeline } from '@/components/ui/audit-timeline';
 import { Button } from '@/components/ui/button';
@@ -21,14 +20,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -54,6 +45,13 @@ import {
   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,
@@ -65,38 +63,83 @@ import {
 } from '@/components/ui/table';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
-import { useApp } from '@hed-hog/next-app-provider';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
   CheckCircle,
+  ChevronDown,
+  ChevronUp,
   Download,
   Edit,
   FileText,
+  Loader2,
   MoreHorizontal,
   Undo,
   XCircle,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+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 { useFinanceData } from '../../../_lib/use-finance-data';
 
-const settleSchema = z.object({
-  installmentId: z.string().min(1, 'Parcela obrigatória'),
-  amount: z.number().min(0.01, 'Valor deve ser maior que zero'),
-  description: z.string().optional(),
-});
-
-type SettleFormValues = z.infer<typeof settleSchema>;
+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();
@@ -105,13 +148,34 @@ export default function TituloDetalhePage() {
     pessoas,
     categorias,
     centrosCusto,
-    contasBancarias,
     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 = ['aberto', 'parcial', 'vencido'].includes(
+    titulo?.status || ''
+  );
+
   const settleCandidates = (titulo?.parcelas || []).filter(
     (parcela: any) =>
       parcela.status === 'aberto' ||
@@ -136,9 +200,17 @@ export default function TituloDetalhePage() {
   const [isCanceling, setIsCanceling] = useState(false);
   const [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
   const [isCancelDialogOpen, setIsCancelDialogOpen] = 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 || []);
@@ -173,6 +245,18 @@ export default function TituloDetalhePage() {
     });
   }, [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">
@@ -200,8 +284,6 @@ export default function TituloDetalhePage() {
     categorias.find((c) => c.id === categoryId);
   const getCentroCustoById = (costCenterId?: string) =>
     centrosCusto.find((c) => c.id === costCenterId);
-  const getContaBancariaById = (bankId?: string) =>
-    contasBancarias.find((c) => c.id === bankId);
 
   const fornecedor = getPessoaById(titulo.fornecedorId);
   const categoria = getCategoriaById(titulo.categoriaId);
@@ -362,8 +444,14 @@ export default function TituloDetalhePage() {
 
   const canApprove = titulo.status === 'rascunho';
   const canEdit = titulo.status === 'rascunho';
-  const canSettle = ['aberto', 'parcial', 'vencido'].includes(titulo.status);
   const canCancel = !['cancelado', 'liquidado'].includes(titulo.status);
+  const reversibleSettlements = settlementsHistory.filter(
+    (group) =>
+      group.normal?.id &&
+      group.statusLabel === 'ATIVO' &&
+      !group.normal?.reconciled
+  );
+  const canReverse = reversibleSettlements.length > 0;
 
   const getErrorMessage = (error: any, fallback: string) => {
     const message = error?.response?.data?.message;
@@ -392,11 +480,11 @@ export default function TituloDetalhePage() {
       });
 
       await refetch();
-      showToastHandler?.('success', 'Título aprovado com sucesso');
+      showToastHandler?.('success', t('messages.approveSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível aprovar o título')
+        getErrorMessage(error, t('messages.approveError'))
       );
     } finally {
       setIsApproving(false);
@@ -422,11 +510,11 @@ export default function TituloDetalhePage() {
 
       await refetch();
       setIsSettleDialogOpen(false);
-      showToastHandler?.('success', 'Baixa registrada com sucesso');
+      showToastHandler?.('success', t('messages.settleSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível registrar a baixa')
+        getErrorMessage(error, t('messages.settleError'))
       );
     } finally {
       setIsSettling(false);
@@ -441,23 +529,58 @@ export default function TituloDetalhePage() {
     setReversingSettlementId(settlementId);
     try {
       await request({
-        url: `/finance/accounts-payable/installments/${titulo.id}/settlements/${settlementId}/reverse`,
-        method: 'PATCH',
-        data: {},
+        url: `/finance/settlements/${settlementId}/reverse`,
+        method: 'POST',
+        data: {
+          reason: reverseReason?.trim() || undefined,
+          memo: reverseReason?.trim() || undefined,
+        },
       });
 
-      await refetch();
-      showToastHandler?.('success', 'Estorno realizado com sucesso');
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      setReverseReason('');
+      showToastHandler?.('success', t('messages.reverseSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível estornar a liquidação')
+        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', 'Conciliação removida com sucesso');
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, 'Não foi possível desconciliar a liquidação')
+      );
+    } finally {
+      setUnreconcilingId(null);
+    }
+  };
+
+  const toggleSettlementExpanded = (settlementId: string) => {
+    setExpandedSettlementRows((current) => ({
+      ...current,
+      [settlementId]: !current[settlementId],
+    }));
+  };
+
   const handleCancel = async () => {
     if (!canCancel || isCanceling) {
       return;
@@ -473,11 +596,11 @@ export default function TituloDetalhePage() {
 
       await refetch();
       setIsCancelDialogOpen(false);
-      showToastHandler?.('success', 'Título cancelado com sucesso');
+      showToastHandler?.('success', t('messages.cancelSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível cancelar o título')
+        getErrorMessage(error, t('messages.cancelError'))
       );
     } finally {
       setIsCanceling(false);
@@ -533,7 +656,21 @@ export default function TituloDetalhePage() {
                   <Download className="mr-2 h-4 w-4" />
                   {t('actions.settle')}
                 </DropdownMenuItem>
-                <DropdownMenuItem disabled>
+                <DropdownMenuItem
+                  disabled={!canReverse || !!reversingSettlementId}
+                  onClick={() => {
+                    const latestSettlement = reversibleSettlements[0];
+                    if (!latestSettlement?.normal?.id) {
+                      return;
+                    }
+
+                    setSelectedSettlementIdToReverse(
+                      String(latestSettlement.normal.id)
+                    );
+                    setReverseReason('');
+                    setIsReverseDialogOpen(true);
+                  }}
+                >
                   <Undo className="mr-2 h-4 w-4" />
                   {t('actions.reverse')}
                 </DropdownMenuItem>
@@ -555,42 +692,100 @@ export default function TituloDetalhePage() {
             >
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Confirmar cancelamento</AlertDialogTitle>
+                  <AlertDialogTitle>
+                    {t('dialogs.cancel.title')}
+                  </AlertDialogTitle>
                   <AlertDialogDescription>
-                    Essa ação altera o título para cancelado e não remove os
-                    registros de auditoria.
+                    {t('dialogs.cancel.description')}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                   <AlertDialogCancel disabled={isCanceling}>
-                    Cancelar
+                    {t('dialogs.cancel.cancel')}
                   </AlertDialogCancel>
                   <AlertDialogAction
                     disabled={isCanceling}
                     onClick={() => void handleCancel()}
                   >
-                    Confirmar cancelamento
+                    {t('dialogs.cancel.confirm')}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
+            <AlertDialog
+              open={isReverseDialogOpen}
+              onOpenChange={(open) => {
+                setIsReverseDialogOpen(open);
+
+                if (!open) {
+                  setSelectedSettlementIdToReverse(null);
+                  setReverseReason('');
+                }
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t('dialogs.reverse.title')}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('dialogs.reverse.description')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <div className="space-y-2">
+                  <FormLabel>Motivo do estorno</FormLabel>
+                  <Input
+                    value={reverseReason}
+                    onChange={(event) => setReverseReason(event.target.value)}
+                    placeholder="Ex.: baixa duplicada"
+                    maxLength={255}
+                    disabled={!!reversingSettlementId}
+                  />
+                </div>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={!!reversingSettlementId}>
+                    {t('dialogs.reverse.cancel')}
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    disabled={
+                      !!reversingSettlementId || !selectedSettlementIdToReverse
+                    }
+                    onClick={() => {
+                      if (!selectedSettlementIdToReverse) {
+                        return;
+                      }
+
+                      void handleReverseSettlement(
+                        selectedSettlementIdToReverse
+                      ).finally(() => {
+                        setIsReverseDialogOpen(false);
+                        setSelectedSettlementIdToReverse(null);
+                        setReverseReason('');
+                      });
+                    }}
+                  >
+                    {t('dialogs.reverse.confirm')}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
             </AlertDialog>
 
-            <Dialog
+            <Sheet
               open={isSettleDialogOpen}
               onOpenChange={setIsSettleDialogOpen}
             >
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Registrar baixa</DialogTitle>
-                  <DialogDescription>
-                    Informe a parcela e o valor da baixa. O backend valida os
-                    estados e limites de valor automaticamente.
-                  </DialogDescription>
-                </DialogHeader>
+              <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"
+                    className="space-y-4 px-4"
                     onSubmit={settleForm.handleSubmit(handleSettle)}
                   >
                     <FormField
@@ -598,7 +793,9 @@ export default function TituloDetalhePage() {
                       name="installmentId"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Parcela</FormLabel>
+                          <FormLabel>
+                            {t('settleSheet.installmentLabel')}
+                          </FormLabel>
                           <Select
                             value={field.value}
                             onValueChange={(value) => {
@@ -618,18 +815,24 @@ export default function TituloDetalhePage() {
                             }}
                           >
                             <FormControl>
-                              <SelectTrigger>
-                                <SelectValue placeholder="Selecione" />
+                              <SelectTrigger className="w-full">
+                                <SelectValue
+                                  placeholder={t(
+                                    'settleSheet.installmentPlaceholder'
+                                  )}
+                                />
                               </SelectTrigger>
                             </FormControl>
                             <SelectContent>
                               {settleCandidates.map((parcela: any) => (
                                 <SelectItem key={parcela.id} value={parcela.id}>
-                                  Parcela {parcela.numero} - em aberto:{' '}
-                                  {new Intl.NumberFormat('pt-BR', {
-                                    style: 'currency',
-                                    currency: 'BRL',
-                                  }).format(Number(parcela.valorAberto || 0))}
+                                  {t('settleSheet.installmentOption', {
+                                    number: parcela.numero,
+                                    amount: new Intl.NumberFormat('pt-BR', {
+                                      style: 'currency',
+                                      currency: 'BRL',
+                                    }).format(Number(parcela.valorAberto || 0)),
+                                  })}
                                 </SelectItem>
                               ))}
                             </SelectContent>
@@ -644,7 +847,7 @@ export default function TituloDetalhePage() {
                       name="amount"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Valor</FormLabel>
+                          <FormLabel>{t('settleSheet.amountLabel')}</FormLabel>
                           <FormControl>
                             <InputMoney
                               value={Number(field.value || 0)}
@@ -663,7 +866,9 @@ export default function TituloDetalhePage() {
                       name="description"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Descrição (opcional)</FormLabel>
+                          <FormLabel>
+                            {t('settleSheet.descriptionLabel')}
+                          </FormLabel>
                           <FormControl>
                             <Input {...field} value={field.value || ''} />
                           </FormControl>
@@ -672,23 +877,19 @@ export default function TituloDetalhePage() {
                       )}
                     />
 
-                    <DialogFooter>
+                    <div className="flex flex-col gap-4">
                       <Button
-                        type="button"
-                        variant="outline"
+                        className="w-full"
+                        type="submit"
                         disabled={isSettling}
-                        onClick={() => setIsSettleDialogOpen(false)}
                       >
-                        Cancelar
-                      </Button>
-                      <Button type="submit" disabled={isSettling}>
-                        Confirmar baixa
+                        {t('settleSheet.confirm')}
                       </Button>
-                    </DialogFooter>
+                    </div>
                   </form>
                 </Form>
-              </DialogContent>
-            </Dialog>
+              </SheetContent>
+            </Sheet>
           </div>
         }
       />
@@ -886,98 +1087,212 @@ export default function TituloDetalhePage() {
         <TabsContent value="liquidacoes" className="mt-4">
           <Card>
             <CardContent className="pt-6">
-              {titulo.parcelas.some((p: any) => p.liquidacoes.length > 0) ? (
+              {isFetchingSettlementsHistory ? (
+                <div className="flex items-center justify-center py-8 text-muted-foreground">
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Carregando histórico de liquidações...
+                </div>
+              ) : settlementsHistory.length > 0 ? (
                 <Table>
                   <TableHeader>
                     <TableRow>
-                      <TableHead>{t('settlementsTable.date')}</TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.value')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.interest')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.discount')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.fine')}
-                      </TableHead>
-                      <TableHead>{t('settlementsTable.account')}</TableHead>
-                      <TableHead>{t('settlementsTable.method')}</TableHead>
-                      <TableHead className="text-right">Ações</TableHead>
+                      <TableHead>Date</TableHead>
+                      <TableHead>Type</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead className="text-right">Net Amount</TableHead>
+                      <TableHead>Method</TableHead>
+                      <TableHead>Account</TableHead>
+                      <TableHead>Reconciled</TableHead>
+                      <TableHead className="text-right">Actions</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
-                    {titulo.parcelas.flatMap((parcela: any) =>
-                      parcela.liquidacoes.map((liq: any) => {
-                        const conta = getContaBancariaById(liq.contaBancariaId);
-                        return (
-                          <TableRow key={liq.id}>
-                            <TableCell>{formatarData(liq.data)}</TableCell>
-                            <TableCell className="text-right">
-                              <Money value={liq.valor} />
+                    {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 className="text-right">
-                              <Money value={liq.juros} />
+                            <TableCell>
+                              <span className="rounded-md border px-2 py-1 text-xs font-medium">
+                                NORMAL
+                              </span>
                             </TableCell>
-                            <TableCell className="text-right">
-                              <Money value={liq.desconto} />
+                            <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">
-                              <Money value={liq.multa} />
+                            <TableCell className="text-right font-medium">
+                              +
+                              <Money
+                                value={
+                                  Math.abs(group.normal.amountCents || 0) / 100
+                                }
+                              />
                             </TableCell>
-                            <TableCell>{conta?.descricao}</TableCell>
                             <TableCell className="capitalize">
-                              {liq.metodo}
+                              {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
+                                  ? 'Conciliado'
+                                  : 'Pendente'}
+                              </span>
                             </TableCell>
                             <TableCell className="text-right">
-                              <AlertDialog>
-                                <AlertDialogTrigger asChild>
+                              <div className="flex items-center justify-end gap-2">
+                                {group.normal.reconciled &&
+                                group.normal.reconciliationId ? (
                                   <Button
                                     variant="outline"
                                     size="sm"
                                     disabled={
-                                      !liq.settlementId ||
-                                      liq.status === 'reversed' ||
-                                      !!reversingSettlementId
+                                      unreconcilingId ===
+                                      group.normal.reconciliationId
+                                    }
+                                    onClick={() =>
+                                      void handleUnreconcileSettlement(
+                                        String(group.normal.reconciliationId)
+                                      )
                                     }
                                   >
-                                    <Undo className="mr-2 h-4 w-4" />
-                                    Estornar
+                                    {unreconcilingId ===
+                                    group.normal.reconciliationId
+                                      ? 'Desconciliando...'
+                                      : 'Desconciliar'}
                                   </Button>
-                                </AlertDialogTrigger>
-                                <AlertDialogContent>
-                                  <AlertDialogHeader>
-                                    <AlertDialogTitle>
-                                      Confirmar estorno
-                                    </AlertDialogTitle>
-                                    <AlertDialogDescription>
-                                      Esta ação cria o estorno da liquidação e
-                                      recalcula saldos e status.
-                                    </AlertDialogDescription>
-                                  </AlertDialogHeader>
-                                  <AlertDialogFooter>
-                                    <AlertDialogCancel>
-                                      Cancelar
-                                    </AlertDialogCancel>
-                                    <AlertDialogAction
-                                      onClick={() =>
-                                        void handleReverseSettlement(
-                                          String(liq.settlementId)
-                                        )
-                                      }
-                                    >
-                                      Confirmar estorno
-                                    </AlertDialogAction>
-                                  </AlertDialogFooter>
-                                </AlertDialogContent>
-                              </AlertDialog>
+                                ) : null}
+
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  title={
+                                    group.normal.reconciled
+                                      ? 'Desconciliar primeiro'
+                                      : undefined
+                                  }
+                                  disabled={!canReverseNormal}
+                                  onClick={() => {
+                                    setSelectedSettlementIdToReverse(normalId);
+                                    setReverseReason('');
+                                    setIsReverseDialogOpen(true);
+                                  }}
+                                >
+                                  <Undo className="mr-2 h-4 w-4" />
+                                  Estornar
+                                </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">
+                                  REVERSAL
+                                </span>
+                              </TableCell>
+                              <TableCell>
+                                <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
+                                  ESTORNO
+                                </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">
+                                    Allocations
+                                  </p>
+                                  <div className="space-y-1">
+                                    {group.allocations.map((allocation) => (
+                                      <div
+                                        key={`${normalId}-${allocation.installmentId}`}
+                                        className="flex items-center justify-between text-sm"
+                                      >
+                                        <span>
+                                          Parcela #{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>
               ) : (