@hed-hog/finance 0.0.252 → 0.0.256

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

@@ -1,17 +1,7 @@
 'use client';
 
+import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
 import { Page, PageHeader } from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
 import { AuditTimeline } from '@/components/ui/audit-timeline';
 import { Button } from '@/components/ui/button';
 import {
@@ -21,13 +11,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Form,
   FormControl,
@@ -38,6 +21,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -64,24 +48,23 @@ 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,
-  Download,
-  Edit,
-  FileText,
-  MoreHorizontal,
-  Undo,
-  XCircle,
-} from 'lucide-react';
+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 { useEffect, useMemo, useState } from 'react';
+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 = {
@@ -90,6 +73,40 @@ type SettleFormValues = {
   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(
@@ -112,15 +129,31 @@ export default function TituloDetalhePage() {
     pessoas,
     categorias,
     centrosCusto,
-    contasBancarias,
     logsAuditoria,
     tags,
   } = data;
 
   const titulo = titulosPagar.find((t) => t.id === id);
-  const canSettle = ['aberto', 'parcial', 'vencido'].includes(
-    titulo?.status || ''
-  );
+
+  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) =>
@@ -145,13 +178,17 @@ export default function TituloDetalhePage() {
   const [isSettling, setIsSettling] = useState(false);
   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 || []);
@@ -225,8 +262,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);
@@ -282,11 +317,6 @@ export default function TituloDetalhePage() {
     window.open(url, '_blank', 'noopener,noreferrer');
   };
 
-  const tTagSelector = (key: string, fallback: string) => {
-    const fullKey = `tagSelector.${key}`;
-    return t.has(fullKey) ? t(fullKey) : fallback;
-  };
-
   const toTagSlug = (value: string) => {
     return value
       .normalize('NFD')
@@ -334,10 +364,7 @@ export default function TituloDetalhePage() {
         return [...current, newTag];
       });
 
-      showToastHandler?.(
-        'success',
-        tTagSelector('messages.createSuccess', 'Tag criada com sucesso')
-      );
+      showToastHandler?.('success', t('tagSelector.messages.createSuccess'));
 
       return {
         id: newTag.id,
@@ -345,10 +372,7 @@ export default function TituloDetalhePage() {
         color: newTag.cor,
       };
     } catch {
-      showToastHandler?.(
-        'error',
-        tTagSelector('messages.createError', 'Não foi possível criar a tag')
-      );
+      showToastHandler?.('error', t('tagSelector.messages.createError'));
       return null;
     } finally {
       setIsCreatingTag(false);
@@ -375,29 +399,21 @@ export default function TituloDetalhePage() {
         setSelectedTagIds(nextTagIds);
       }
     } catch {
-      showToastHandler?.(
-        'error',
-        tTagSelector(
-          'messages.updateError',
-          'Não foi possível atualizar as tags'
-        )
-      );
+      showToastHandler?.('error', t('tagSelector.messages.updateError'));
     }
   };
 
-  const canApprove = titulo.status === 'rascunho';
-  const canEdit = titulo.status === 'rascunho';
-  const canCancel = !['cancelado', 'liquidado'].includes(titulo.status);
-  const reversibleSettlements = titulo.parcelas
-    .flatMap((parcela: any) => parcela.liquidacoes || [])
-    .filter((liquidacao: any) => {
-      return (
-        !!liquidacao?.settlementId &&
-        liquidacao?.status !== 'reversed' &&
-        liquidacao?.status !== 'estornado'
-      );
-    });
-  const canReverse = reversibleSettlements.length > 0;
+  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;
@@ -454,7 +470,7 @@ export default function TituloDetalhePage() {
         },
       });
 
-      await refetch();
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
       setIsSettleDialogOpen(false);
       showToastHandler?.('success', t('messages.settleSuccess'));
     } catch (error) {
@@ -467,7 +483,10 @@ export default function TituloDetalhePage() {
     }
   };
 
-  const handleReverseSettlement = async (settlementId: string) => {
+  const handleReverseSettlement = async (
+    settlementId: string,
+    reasonOverride?: string
+  ) => {
     if (!settlementId || reversingSettlementId) {
       return;
     }
@@ -475,12 +494,16 @@ 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: reasonOverride?.trim() || reverseReason?.trim() || undefined,
+          memo: reasonOverride?.trim() || reverseReason?.trim() || undefined,
+        },
       });
 
-      await refetch();
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      setReverseReason('');
       showToastHandler?.('success', t('messages.reverseSuccess'));
     } catch (error) {
       showToastHandler?.(
@@ -492,6 +515,37 @@ export default function TituloDetalhePage() {
     }
   };
 
+  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;
@@ -506,7 +560,6 @@ export default function TituloDetalhePage() {
       });
 
       await refetch();
-      setIsCancelDialogOpen(false);
       showToastHandler?.('success', t('messages.cancelSuccess'));
     } catch (error) {
       showToastHandler?.(
@@ -534,140 +587,129 @@ export default function TituloDetalhePage() {
         ]}
         actions={
           <div className="flex items-center gap-2">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline">
-                  <MoreHorizontal className="mr-2 h-4 w-4" />
-                  {t('actions.title')}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  disabled={!canEdit}
-                  onClick={() =>
-                    router.push(
-                      `/finance/accounts-payable/installments?editId=${titulo.id}`
-                    )
-                  }
-                >
-                  <Edit className="mr-2 h-4 w-4" />
-                  {t('actions.edit')}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  disabled={!canApprove || isApproving}
-                  onClick={() => void handleApprove()}
-                >
-                  <CheckCircle className="mr-2 h-4 w-4" />
-                  {t('actions.approve')}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  disabled={!canSettle || settleCandidates.length === 0}
-                  onClick={() => setIsSettleDialogOpen(true)}
-                >
-                  <Download className="mr-2 h-4 w-4" />
-                  {t('actions.settle')}
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  disabled={!canReverse || !!reversingSettlementId}
-                  onClick={() => {
-                    const latestSettlement = reversibleSettlements.at(-1);
-                    if (!latestSettlement?.settlementId) {
-                      return;
-                    }
-
-                    setSelectedSettlementIdToReverse(
-                      String(latestSettlement.settlementId)
-                    );
-                    setIsReverseDialogOpen(true);
-                  }}
-                >
-                  <Undo className="mr-2 h-4 w-4" />
-                  {t('actions.reverse')}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  className="text-destructive"
-                  disabled={!canCancel || isCanceling}
-                  onClick={() => setIsCancelDialogOpen(true)}
-                >
-                  <XCircle className="mr-2 h-4 w-4" />
-                  {t('actions.cancel')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <AlertDialog
-              open={isCancelDialogOpen}
-              onOpenChange={setIsCancelDialogOpen}
-            >
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    {t('dialogs.cancel.title')}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t('dialogs.cancel.description')}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel disabled={isCanceling}>
-                    {t('dialogs.cancel.cancel')}
-                  </AlertDialogCancel>
-                  <AlertDialogAction
-                    disabled={isCanceling}
-                    onClick={() => void handleCancel()}
-                  >
-                    {t('dialogs.cancel.confirm')}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+            <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()}
+            />
 
-            <AlertDialog
+            <Sheet
               open={isReverseDialogOpen}
               onOpenChange={(open) => {
                 setIsReverseDialogOpen(open);
 
                 if (!open) {
                   setSelectedSettlementIdToReverse(null);
+                  setReverseReason('');
                 }
               }}
             >
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    {t('dialogs.reverse.title')}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>{t('dialogs.reverse.title')}</SheetTitle>
+                  <SheetDescription>
                     {t('dialogs.reverse.description')}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel disabled={!!reversingSettlementId}>
-                    {t('dialogs.reverse.cancel')}
-                  </AlertDialogCancel>
-                  <AlertDialogAction
-                    disabled={
-                      !!reversingSettlementId || !selectedSettlementIdToReverse
-                    }
-                    onClick={() => {
-                      if (!selectedSettlementIdToReverse) {
-                        return;
-                      }
+                  </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>
 
-                      void handleReverseSettlement(
-                        selectedSettlementIdToReverse
-                      ).finally(() => {
+                  <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);
-                      });
-                    }}
-                  >
-                    {t('dialogs.reverse.confirm')}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+                        setReverseReason('');
+                      }}
+                    >
+                      {t('dialogs.reverse.cancel')}
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
 
             <Sheet
               open={isSettleDialogOpen}
@@ -869,35 +911,21 @@ export default function TituloDetalhePage() {
                     onChange={handleChangeTags}
                     onCreateTag={handleCreateTag}
                     disabled={isCreatingTag}
-                    emptyText={tTagSelector('noTags', 'Sem tags')}
+                    emptyText={t('tagSelector.noTags')}
                     labels={{
-                      addTag: tTagSelector('addTag', 'Adicionar tag'),
-                      sheetTitle: tTagSelector('sheetTitle', 'Gerenciar tags'),
-                      sheetDescription: tTagSelector(
-                        'sheetDescription',
-                        'Selecione tags existentes ou crie uma nova.'
-                      ),
-                      createLabel: tTagSelector('createLabel', 'Nova tag'),
-                      createPlaceholder: tTagSelector(
-                        'createPlaceholder',
-                        'Digite o nome da tag'
-                      ),
-                      createAction: tTagSelector('createAction', 'Criar tag'),
-                      popularTitle: tTagSelector(
-                        'popularTitle',
-                        'Tags mais usadas'
-                      ),
-                      selectedTitle: tTagSelector(
-                        'selectedTitle',
-                        'Tags selecionadas'
-                      ),
-                      noTags: tTagSelector('noTags', 'Sem tags'),
-                      cancel: tTagSelector('cancel', 'Cancelar'),
-                      apply: tTagSelector('apply', 'Aplicar'),
+                      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.has('tagSelector.removeTagAria')
-                          ? t('tagSelector.removeTagAria', { tag: tagName })
-                          : `Remover tag ${tagName}`,
+                        t('tagSelector.removeTagAria', { tag: tagName }),
                     }}
                   />
                 </dd>
@@ -985,105 +1013,233 @@ 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" />
+                  {t('settlementsHistory.loading')}
+                </div>
+              ) : settlementsHistory.length > 0 ? (
                 <Table>
                   <TableHeader>
                     <TableRow>
-                      <TableHead>{t('settlementsTable.date')}</TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.value')}
+                      <TableHead>
+                        {t('settlementsHistory.headers.date')}
                       </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.interest')}
+                      <TableHead>
+                        {t('settlementsHistory.headers.type')}
                       </TableHead>
-                      <TableHead className="text-right">
-                        {t('settlementsTable.discount')}
+                      <TableHead>
+                        {t('settlementsHistory.headers.status')}
                       </TableHead>
                       <TableHead className="text-right">
-                        {t('settlementsTable.fine')}
+                        {t('settlementsHistory.headers.netAmount')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.method')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.account')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.reconciled')}
                       </TableHead>
-                      <TableHead>{t('settlementsTable.account')}</TableHead>
-                      <TableHead>{t('settlementsTable.method')}</TableHead>
                       <TableHead className="text-right">
-                        {t('settlementsTable.actions')}
+                        {t('settlementsHistory.headers.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">
+                                {t('settlementsHistory.normalType')}
+                              </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
+                                  ? t('settlementsHistory.reconciled.yes')
+                                  : t('settlementsHistory.reconciled.no')}
+                              </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" />
-                                    {t('settlementsTable.reverseButton')}
-                                  </Button>
-                                </AlertDialogTrigger>
-                                <AlertDialogContent>
-                                  <AlertDialogHeader>
-                                    <AlertDialogTitle>
-                                      {t('settlementsTable.reverseDialogTitle')}
-                                    </AlertDialogTitle>
-                                    <AlertDialogDescription>
-                                      {t(
-                                        'settlementsTable.reverseDialogDescription'
-                                      )}
-                                    </AlertDialogDescription>
-                                  </AlertDialogHeader>
-                                  <AlertDialogFooter>
-                                    <AlertDialogCancel>
-                                      {t(
-                                        'settlementsTable.reverseDialogCancel'
-                                      )}
-                                    </AlertDialogCancel>
-                                    <AlertDialogAction
-                                      onClick={() =>
-                                        void handleReverseSettlement(
-                                          String(liq.settlementId)
+                                    {unreconcilingId ===
+                                    group.normal.reconciliationId
+                                      ? t(
+                                          'settlementsHistory.unreconcileLoading'
                                         )
-                                      }
-                                    >
-                                      {t(
-                                        'settlementsTable.reverseDialogConfirm'
-                                      )}
-                                    </AlertDialogAction>
-                                  </AlertDialogFooter>
-                                </AlertDialogContent>
-                              </AlertDialog>
+                                      : 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>
               ) : (