@hed-hog/finance 0.0.274 → 0.0.276

package/hedhog/frontend/app/cash-and-banks/bank-reconciliation/page.tsx.ejs

@@ -1,6 +1,16 @@
 'use client';
 
 import { Page, PageHeader } from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -40,7 +50,7 @@ import {
 import { StatusBadge } from '@/components/ui/status-badge';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Check, DollarSign, Link2, RefreshCw } from 'lucide-react';
+import { Check, DollarSign, Link2, RefreshCw, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
@@ -60,6 +70,8 @@ type Statement = {
   data: string;
   descricao: string;
   valor: number;
+  reconciliationId?: string | null;
+  settlementId?: string | null;
   tipo: 'entrada' | 'saida';
   statusConciliacao:
     | 'importado'
@@ -290,6 +302,9 @@ export default function ConciliacaoPage() {
   const [contaFilter, setContaFilter] = useState<string>('');
   const [selectedExtrato, setSelectedExtrato] = useState<string | null>(null);
   const [selectedTitulo, setSelectedTitulo] = useState<string | null>(null);
+  const [reconciliationToUndo, setReconciliationToUndo] = useState<
+    string | null
+  >(null);
 
   const { data: contasBancarias = [] } = useQuery<BankAccount[]>({
     queryKey: ['finance-bank-accounts'],
@@ -354,29 +369,30 @@ export default function ConciliacaoPage() {
     },
   });
 
-  const { data: reconciliationSummary } = useQuery<BankReconciliationSummary>({
-    queryKey: ['finance-bank-reconciliation-summary', contaFilter],
-    queryFn: async () => {
-      if (!contaFilter) {
-        return {
-          discrepancies: 0,
-          difference: 0,
-        };
-      }
+  const { data: reconciliationSummary, refetch: refetchReconciliationSummary } =
+    useQuery<BankReconciliationSummary>({
+      queryKey: ['finance-bank-reconciliation-summary', contaFilter],
+      queryFn: async () => {
+        if (!contaFilter) {
+          return {
+            discrepancies: 0,
+            difference: 0,
+          };
+        }
 
-      const response = await request<BankReconciliationSummary>({
-        url: `/finance/bank-reconciliation/summary?bank_account_id=${contaFilter}`,
-        method: 'GET',
-      });
+        const response = await request<BankReconciliationSummary>({
+          url: `/finance/bank-reconciliation/summary?bank_account_id=${contaFilter}`,
+          method: 'GET',
+        });
 
-      return (
-        (response?.data as BankReconciliationSummary) || {
-          discrepancies: 0,
-          difference: 0,
-        }
-      );
-    },
-  });
+        return (
+          (response?.data as BankReconciliationSummary) || {
+            discrepancies: 0,
+            difference: 0,
+          }
+        );
+      },
+    });
 
   const { data: titulosPagar = [], refetch: refetchTitulosPagar } = useQuery<
     FinancialTitle[]
@@ -411,10 +427,16 @@ export default function ConciliacaoPage() {
     (e) =>
       e.statusConciliacao === 'pendente' || e.statusConciliacao === 'importado'
   );
+  const extratosConciliados = extratos.filter(
+    (e) => e.statusConciliacao === 'conciliado' && !!e.reconciliationId
+  );
 
   const extratosFiltered = extratosPendentes.filter(
     (e) => e.contaBancariaId === contaFilter
   );
+  const extratosConciliadosFiltered = extratosConciliados.filter(
+    (e) => e.contaBancariaId === contaFilter
+  );
 
   const titulosAbertos = useMemo<OpenTitleItem[]>(() => {
     const payables: OpenTitleItem[] = titulosPagar.flatMap((titulo) =>
@@ -492,6 +514,7 @@ export default function ConciliacaoPage() {
       refetchExtratos(),
       refetchTitulosPagar(),
       refetchTitulosReceber(),
+      refetchReconciliationSummary(),
     ]);
   };
 
@@ -500,23 +523,16 @@ export default function ConciliacaoPage() {
       return;
     }
 
-    const endpointBase =
-      selectedTituloItem.tipo === 'pagar'
-        ? '/finance/accounts-payable/installments'
-        : '/finance/accounts-receivable/installments';
-
     try {
       await request({
-        url: `${endpointBase}/${selectedTituloItem.titleId}/settlements`,
+        url: '/finance/bank-reconciliations',
         method: 'POST',
         data: {
+          title_id: Number(selectedTituloItem.titleId),
           installment_id: Number(selectedTituloItem.installmentId),
-          amount: Math.abs(selectedExtratoItem.valor),
-          settled_at: selectedExtratoItem.data,
-          bank_account_id: Number(contaFilter),
+          bank_statement_line_id: Number(selectedExtratoItem.id),
           payment_channel: 'transferencia',
           description: selectedExtratoItem.descricao,
-          bank_statement_line_id: Number(selectedExtratoItem.id),
         },
       });
 
@@ -529,6 +545,27 @@ export default function ConciliacaoPage() {
     }
   };
 
+  const handleUnreconcile = async () => {
+    if (!reconciliationToUndo) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/bank-reconciliations/${reconciliationToUndo}`,
+        method: 'DELETE',
+      });
+
+      setReconciliationToUndo(null);
+      setSelectedExtrato(null);
+      setSelectedTitulo(null);
+      await handleRefreshData();
+      showToastHandler?.('success', t('unreconcile.success'));
+    } catch {
+      showToastHandler?.('error', t('unreconcile.error'));
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -713,6 +750,65 @@ export default function ConciliacaoPage() {
                   </p>
                 </div>
               )}
+
+              {extratosConciliadosFiltered.length > 0 ? (
+                <>
+                  <div className="mt-6 border-t pt-4">
+                    <p className="text-sm font-medium">
+                      {t('statement.reconciledTitle')}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t('statement.reconciledDescription')}
+                    </p>
+                  </div>
+
+                  {extratosConciliadosFiltered.map((extrato) => (
+                    <div
+                      key={`reconciled-${extrato.id}`}
+                      className="flex items-center gap-3 rounded-lg border p-3"
+                    >
+                      <div className="flex-1">
+                        <div className="flex items-center justify-between">
+                          <span className="text-sm font-medium">
+                            {extrato.descricao}
+                          </span>
+                          <span
+                            className={`font-semibold ${
+                              extrato.tipo === 'entrada'
+                                ? 'text-green-600'
+                                : 'text-red-600'
+                            }`}
+                          >
+                            {extrato.tipo === 'saida' && '-'}
+                            {formatarMoeda(Math.abs(extrato.valor))}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                          <span>{formatarData(extrato.data)}</span>
+                          <StatusBadge
+                            status={extrato.statusConciliacao}
+                            type="conciliacao"
+                          />
+                        </div>
+                      </div>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          setReconciliationToUndo(
+                            extrato.reconciliationId || null
+                          )
+                        }
+                        disabled={!extrato.reconciliationId}
+                      >
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        {t('unreconcile.action')}
+                      </Button>
+                    </div>
+                  ))}
+                </>
+              ) : null}
             </div>
           </CardContent>
         </Card>
@@ -820,6 +916,30 @@ export default function ConciliacaoPage() {
           </CardContent>
         </Card>
       )}
+
+      <AlertDialog
+        open={!!reconciliationToUndo}
+        onOpenChange={(open) => {
+          if (!open) {
+            setReconciliationToUndo(null);
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('unreconcile.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('unreconcile.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={() => void handleUnreconcile()}>
+              {t('unreconcile.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Page>
   );
 }