@hed-hog/finance 0.0.252 → 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';
@@ -64,13 +63,16 @@ 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,
@@ -78,7 +80,7 @@ import {
 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';
@@ -90,6 +92,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,12 +148,30 @@ 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 || ''
   );
@@ -149,9 +203,14 @@ export default function TituloDetalhePage() {
   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 +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);
@@ -388,15 +445,12 @@ export default function TituloDetalhePage() {
   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 reversibleSettlements = settlementsHistory.filter(
+    (group) =>
+      group.normal?.id &&
+      group.statusLabel === 'ATIVO' &&
+      !group.normal?.reconciled
+  );
   const canReverse = reversibleSettlements.length > 0;
 
   const getErrorMessage = (error: any, fallback: string) => {
@@ -475,12 +529,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: reverseReason?.trim() || undefined,
+          memo: reverseReason?.trim() || undefined,
+        },
       });
 
-      await refetch();
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
+      setReverseReason('');
       showToastHandler?.('success', t('messages.reverseSuccess'));
     } catch (error) {
       showToastHandler?.(
@@ -492,6 +550,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', '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;
@@ -570,14 +659,15 @@ export default function TituloDetalhePage() {
                 <DropdownMenuItem
                   disabled={!canReverse || !!reversingSettlementId}
                   onClick={() => {
-                    const latestSettlement = reversibleSettlements.at(-1);
-                    if (!latestSettlement?.settlementId) {
+                    const latestSettlement = reversibleSettlements[0];
+                    if (!latestSettlement?.normal?.id) {
                       return;
                     }
 
                     setSelectedSettlementIdToReverse(
-                      String(latestSettlement.settlementId)
+                      String(latestSettlement.normal.id)
                     );
+                    setReverseReason('');
                     setIsReverseDialogOpen(true);
                   }}
                 >
@@ -630,6 +720,7 @@ export default function TituloDetalhePage() {
 
                 if (!open) {
                   setSelectedSettlementIdToReverse(null);
+                  setReverseReason('');
                 }
               }}
             >
@@ -642,6 +733,16 @@ export default function TituloDetalhePage() {
                     {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')}
@@ -660,6 +761,7 @@ export default function TituloDetalhePage() {
                       ).finally(() => {
                         setIsReverseDialogOpen(false);
                         setSelectedSettlementIdToReverse(null);
+                        setReverseReason('');
                       });
                     }}
                   >
@@ -985,105 +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">
-                        {t('settlementsTable.actions')}
-                      </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" />
-                                    {t('settlementsTable.reverseButton')}
+                                    {unreconcilingId ===
+                                    group.normal.reconciliationId
+                                      ? 'Desconciliando...'
+                                      : 'Desconciliar'}
                                   </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)
-                                        )
-                                      }
-                                    >
-                                      {t(
-                                        'settlementsTable.reverseDialogConfirm'
-                                      )}
-                                    </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>
               ) : (