@hed-hog/finance 0.0.250 → 0.0.252

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

@@ -21,14 +21,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -54,6 +46,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,
@@ -78,25 +77,33 @@ import {
 } 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 { 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;
+};
 
 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();
@@ -111,6 +118,9 @@ export default function TituloDetalhePage() {
   } = data;
 
   const titulo = titulosPagar.find((t) => t.id === id);
+  const canSettle = ['aberto', 'parcial', 'vencido'].includes(
+    titulo?.status || ''
+  );
 
   const settleCandidates = (titulo?.parcelas || []).filter(
     (parcela: any) =>
@@ -136,6 +146,9 @@ 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 [reversingSettlementId, setReversingSettlementId] = useState<
     string | null
   >(null);
@@ -173,6 +186,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">
@@ -362,8 +387,17 @@ 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 = 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 getErrorMessage = (error: any, fallback: string) => {
     const message = error?.response?.data?.message;
@@ -392,11 +426,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 +456,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);
@@ -447,11 +481,11 @@ export default function TituloDetalhePage() {
       });
 
       await refetch();
-      showToastHandler?.('success', 'Estorno realizado com sucesso');
+      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);
@@ -473,11 +507,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 +567,20 @@ 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.at(-1);
+                    if (!latestSettlement?.settlementId) {
+                      return;
+                    }
+
+                    setSelectedSettlementIdToReverse(
+                      String(latestSettlement.settlementId)
+                    );
+                    setIsReverseDialogOpen(true);
+                  }}
+                >
                   <Undo className="mr-2 h-4 w-4" />
                   {t('actions.reverse')}
                 </DropdownMenuItem>
@@ -555,42 +602,88 @@ 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);
+                }
+              }}
+            >
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    {t('dialogs.reverse.title')}
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    {t('dialogs.reverse.description')}
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <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);
+                      });
+                    }}
+                  >
+                    {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 +691,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 +713,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 +745,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 +764,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 +775,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>
         }
       />
@@ -905,7 +1004,9 @@ export default function TituloDetalhePage() {
                       </TableHead>
                       <TableHead>{t('settlementsTable.account')}</TableHead>
                       <TableHead>{t('settlementsTable.method')}</TableHead>
-                      <TableHead className="text-right">Ações</TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsTable.actions')}
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -944,22 +1045,25 @@ export default function TituloDetalhePage() {
                                     }
                                   >
                                     <Undo className="mr-2 h-4 w-4" />
-                                    Estornar
+                                    {t('settlementsTable.reverseButton')}
                                   </Button>
                                 </AlertDialogTrigger>
                                 <AlertDialogContent>
                                   <AlertDialogHeader>
                                     <AlertDialogTitle>
-                                      Confirmar estorno
+                                      {t('settlementsTable.reverseDialogTitle')}
                                     </AlertDialogTitle>
                                     <AlertDialogDescription>
-                                      Esta ação cria o estorno da liquidação e
-                                      recalcula saldos e status.
+                                      {t(
+                                        'settlementsTable.reverseDialogDescription'
+                                      )}
                                     </AlertDialogDescription>
                                   </AlertDialogHeader>
                                   <AlertDialogFooter>
                                     <AlertDialogCancel>
-                                      Cancelar
+                                      {t(
+                                        'settlementsTable.reverseDialogCancel'
+                                      )}
                                     </AlertDialogCancel>
                                     <AlertDialogAction
                                       onClick={() =>
@@ -968,7 +1072,9 @@ export default function TituloDetalhePage() {
                                         )
                                       }
                                     >
-                                      Confirmar estorno
+                                      {t(
+                                        'settlementsTable.reverseDialogConfirm'
+                                      )}
                                     </AlertDialogAction>
                                   </AlertDialogFooter>
                                 </AlertDialogContent>

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

@@ -1729,6 +1729,8 @@ export default function TitulosPagarPage() {
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('');
   const [editingTitleId, setEditingTitleId] = useState<string | null>(null);
+  const [approvingTitleId, setApprovingTitleId] = useState<string | null>(null);
+  const [reversingTitleId, setReversingTitleId] = useState<string | null>(null);
   const [cancelingTitleId, setCancelingTitleId] = useState<string | null>(null);
 
   const editingTitle = useMemo(
@@ -1792,13 +1794,97 @@ export default function TitulosPagarPage() {
 
       await refetch();
       showToastHandler?.('success', 'Título cancelado com sucesso');
-    } catch {
-      showToastHandler?.('error', 'Não foi possível cancelar o título');
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível cancelar o título'
+      );
     } finally {
       setCancelingTitleId(null);
     }
   };
 
+  const handleApproveTitle = async (titleId: string) => {
+    if (!titleId || approvingTitleId) {
+      return;
+    }
+
+    setApprovingTitleId(titleId);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titleId}/approve`,
+        method: 'PATCH',
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Título aprovado com sucesso');
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível aprovar o título'
+      );
+    } finally {
+      setApprovingTitleId(null);
+    }
+  };
+
+  const handleSettleTitle = (titleId: string) => {
+    router.push(
+      `/finance/accounts-payable/installments/${titleId}?action=settle`
+    );
+  };
+
+  const handleReverseTitle = async (title: any) => {
+    const titleId = title?.id;
+
+    if (!titleId || reversingTitleId) {
+      return;
+    }
+
+    const settlementToReverse = (title?.parcelas || [])
+      .flatMap((parcela: any) => parcela?.liquidacoes || [])
+      .find((liquidacao: any) => {
+        return (
+          !!liquidacao?.settlementId &&
+          liquidacao?.status !== 'reversed' &&
+          liquidacao?.status !== 'estornado'
+        );
+      });
+
+    if (!settlementToReverse?.settlementId) {
+      showToastHandler?.('error', 'Nenhuma liquidação ativa para estornar');
+      return;
+    }
+
+    setReversingTitleId(titleId);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titleId}/settlements/${settlementToReverse.settlementId}/reverse`,
+        method: 'PATCH',
+        data: {},
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Estorno realizado com sucesso');
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível estornar a liquidação'
+      );
+    } finally {
+      setReversingTitleId(null);
+    }
+  };
+
   const filteredTitulos = titulosPagar.filter((titulo) => {
     const matchesSearch =
       titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
@@ -1985,23 +2071,32 @@ export default function TitulosPagarPage() {
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
-                          disabled={titulo.status !== 'rascunho'}
+                          disabled={
+                            titulo.status !== 'rascunho' ||
+                            approvingTitleId === titulo.id
+                          }
+                          onClick={() => void handleApproveTitle(titulo.id)}
                         >
                           <CheckCircle className="mr-2 h-4 w-4" />
                           {t('table.actions.approve')}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           disabled={
-                            !['aberto', 'parcial'].includes(titulo.status)
+                            !['aberto', 'parcial', 'vencido'].includes(
+                              titulo.status
+                            )
                           }
+                          onClick={() => handleSettleTitle(titulo.id)}
                         >
                           <Download className="mr-2 h-4 w-4" />
                           {t('table.actions.settle')}
                         </DropdownMenuItem>
                         <DropdownMenuItem
                           disabled={
-                            !['parcial', 'liquidado'].includes(titulo.status)
+                            !['parcial', 'liquidado'].includes(titulo.status) ||
+                            reversingTitleId === titulo.id
                           }
+                          onClick={() => void handleReverseTitle(titulo)}
                         >
                           <Undo className="mr-2 h-4 w-4" />
                           {t('table.actions.reverse')}

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

@@ -22,14 +22,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -54,6 +46,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,
@@ -522,21 +521,21 @@ export default function TituloReceberDetalhePage() {
               </DropdownMenuContent>
             </DropdownMenu>
 
-            <Dialog
+            <Sheet
               open={isSettleDialogOpen}
               onOpenChange={setIsSettleDialogOpen}
             >
-              <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Registrar recebimento</DialogTitle>
-                  <DialogDescription>
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>Registrar recebimento</SheetTitle>
+                  <SheetDescription>
                     Informe a parcela e o valor para baixa parcial ou total.
-                  </DialogDescription>
-                </DialogHeader>
+                  </SheetDescription>
+                </SheetHeader>
 
                 <Form {...settleForm}>
                   <form
-                    className="space-y-4"
+                    className="space-y-4 px-1"
                     onSubmit={settleForm.handleSubmit(handleSettle)}
                   >
                     <FormField
@@ -618,7 +617,7 @@ export default function TituloReceberDetalhePage() {
                       )}
                     />
 
-                    <DialogFooter>
+                    <div className="flex justify-end gap-2 pt-2">
                       <Button
                         type="button"
                         variant="outline"
@@ -630,11 +629,11 @@ export default function TituloReceberDetalhePage() {
                       <Button type="submit" disabled={isSettling}>
                         Confirmar recebimento
                       </Button>
-                    </DialogFooter>
+                    </div>
                   </form>
                 </Form>
-              </DialogContent>
-            </Dialog>
+              </SheetContent>
+            </Sheet>
           </div>
         }
       />