@hed-hog/finance 0.0.239 → 0.0.244

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

@@ -78,7 +78,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -96,6 +96,7 @@ type SettleFormValues = z.infer<typeof settleSchema>;
 export default function TituloDetalhePage() {
   const t = useTranslations('finance.PayableInstallmentDetailPage');
   const { request, showToastHandler } = useApp();
+  const router = useRouter();
   const params = useParams<{ id: string }>();
   const id = params?.id;
   const { data, refetch } = useFinanceData();
@@ -132,7 +133,9 @@ export default function TituloDetalhePage() {
   const [isCreatingTag, setIsCreatingTag] = useState(false);
   const [isApproving, setIsApproving] = useState(false);
   const [isSettling, setIsSettling] = useState(false);
+  const [isCanceling, setIsCanceling] = useState(false);
   const [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
+  const [isCancelDialogOpen, setIsCancelDialogOpen] = useState(false);
   const [reversingSettlementId, setReversingSettlementId] = useState<
     string | null
   >(null);
@@ -358,7 +361,9 @@ export default function TituloDetalhePage() {
   };
 
   const canApprove = titulo.status === 'rascunho';
-  const canSettle = ['aprovado', 'aberto', 'parcial'].includes(titulo.status);
+  const canEdit = titulo.status === 'rascunho';
+  const canSettle = ['aberto', 'parcial', 'vencido'].includes(titulo.status);
+  const canCancel = !['cancelado', 'liquidado'].includes(titulo.status);
 
   const getErrorMessage = (error: any, fallback: string) => {
     const message = error?.response?.data?.message;
@@ -453,6 +458,32 @@ export default function TituloDetalhePage() {
     }
   };
 
+  const handleCancel = async () => {
+    if (!canCancel || isCanceling) {
+      return;
+    }
+
+    setIsCanceling(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/cancel`,
+        method: 'PATCH',
+        data: {},
+      });
+
+      await refetch();
+      setIsCancelDialogOpen(false);
+      showToastHandler?.('success', 'Título cancelado com sucesso');
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, 'Não foi possível cancelar o título')
+      );
+    } finally {
+      setIsCanceling(false);
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -477,7 +508,14 @@ export default function TituloDetalhePage() {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem>
+                <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>
@@ -500,13 +538,43 @@ export default function TituloDetalhePage() {
                   {t('actions.reverse')}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem className="text-destructive">
+                <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>Confirmar cancelamento</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    Essa ação altera o título para cancelado e não remove os
+                    registros de auditoria.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel disabled={isCanceling}>
+                    Cancelar
+                  </AlertDialogCancel>
+                  <AlertDialogAction
+                    disabled={isCanceling}
+                    onClick={() => void handleCancel()}
+                  >
+                    Confirmar cancelamento
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+
             <Dialog
               open={isSettleDialogOpen}
               onOpenChange={setIsSettleDialogOpen}
@@ -665,6 +733,14 @@ export default function TituloDetalhePage() {
                   <Money value={titulo.valorTotal} />
                 </dd>
               </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.status')}
+                </dt>
+                <dd className="mt-1">
+                  <StatusBadge status={titulo.status} />
+                </dd>
+              </div>
               <div>
                 <dt className="text-sm font-medium text-muted-foreground">
                   {t('documentData.category')}