@hed-hog/finance 0.0.253 → 0.0.256

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

@@ -1,16 +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,
-} from '@/components/ui/alert-dialog';
 import { AuditTimeline } from '@/components/ui/audit-timeline';
 import { Button } from '@/components/ui/button';
 import {
@@ -20,13 +11,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
 import {
   Form,
   FormControl,
@@ -37,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,
@@ -65,18 +50,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
 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,
-} 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';
@@ -84,6 +58,13 @@ 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 = {
@@ -172,9 +153,7 @@ export default function TituloDetalhePage() {
     placeholderData: (old) => old,
   });
 
-  const canSettle = ['aberto', 'parcial', 'vencido'].includes(
-    titulo?.status || ''
-  );
+  const canSettle = canSettleTitle(titulo?.status);
 
   const settleCandidates = (titulo?.parcelas || []).filter(
     (parcela: any) =>
@@ -199,7 +178,6 @@ 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);
@@ -339,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')
@@ -391,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,
@@ -402,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);
@@ -432,26 +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 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 = reversibleSettlements.length > 0;
+  const canReverse =
+    canReverseTitle(titulo.status) && reversibleSettlements.length > 0;
 
   const getErrorMessage = (error: any, fallback: string) => {
     const message = error?.response?.data?.message;
@@ -508,7 +470,7 @@ export default function TituloDetalhePage() {
         },
       });
 
-      await refetch();
+      await Promise.all([refetch(), refetchSettlementsHistory()]);
       setIsSettleDialogOpen(false);
       showToastHandler?.('success', t('messages.settleSuccess'));
     } catch (error) {
@@ -521,7 +483,10 @@ export default function TituloDetalhePage() {
     }
   };
 
-  const handleReverseSettlement = async (settlementId: string) => {
+  const handleReverseSettlement = async (
+    settlementId: string,
+    reasonOverride?: string
+  ) => {
     if (!settlementId || reversingSettlementId) {
       return;
     }
@@ -532,8 +497,8 @@ export default function TituloDetalhePage() {
         url: `/finance/settlements/${settlementId}/reverse`,
         method: 'POST',
         data: {
-          reason: reverseReason?.trim() || undefined,
-          memo: reverseReason?.trim() || undefined,
+          reason: reasonOverride?.trim() || reverseReason?.trim() || undefined,
+          memo: reasonOverride?.trim() || reverseReason?.trim() || undefined,
         },
       });
 
@@ -563,11 +528,11 @@ export default function TituloDetalhePage() {
       });
 
       await Promise.all([refetch(), refetchSettlementsHistory()]);
-      showToastHandler?.('success', 'Conciliação removida com sucesso');
+      showToastHandler?.('success', t('messages.unreconcileSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível desconciliar a liquidação')
+        getErrorMessage(error, t('messages.unreconcileError'))
       );
     } finally {
       setUnreconcilingId(null);
@@ -595,7 +560,6 @@ export default function TituloDetalhePage() {
       });
 
       await refetch();
-      setIsCancelDialogOpen(false);
       showToastHandler?.('success', t('messages.cancelSuccess'));
     } catch (error) {
       showToastHandler?.(
@@ -623,97 +587,62 @@ 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[0];
-                    if (!latestSettlement?.normal?.id) {
-                      return;
-                    }
-
-                    setSelectedSettlementIdToReverse(
-                      String(latestSettlement.normal.id)
-                    );
-                    setReverseReason('');
-                    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);
@@ -724,52 +653,63 @@ export default function TituloDetalhePage() {
                 }
               }}
             >
-              <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>
-                <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')}
-                  </AlertDialogCancel>
-                  <AlertDialogAction
-                    disabled={
-                      !!reversingSettlementId || !selectedSettlementIdToReverse
-                    }
-                    onClick={() => {
-                      if (!selectedSettlementIdToReverse) {
-                        return;
-                      }
+                  </SheetDescription>
+                </SheetHeader>
 
-                      void handleReverseSettlement(
-                        selectedSettlementIdToReverse
-                      ).finally(() => {
+                <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>
+
+                  <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);
                         setReverseReason('');
-                      });
-                    }}
-                  >
-                    {t('dialogs.reverse.confirm')}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
+                      }}
+                    >
+                      {t('dialogs.reverse.cancel')}
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
 
             <Sheet
               open={isSettleDialogOpen}
@@ -971,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>
@@ -1090,20 +1016,36 @@ export default function TituloDetalhePage() {
               {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...
+                  {t('settlementsHistory.loading')}
                 </div>
               ) : settlementsHistory.length > 0 ? (
                 <Table>
                   <TableHeader>
                     <TableRow>
-                      <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>
+                      <TableHead>
+                        {t('settlementsHistory.headers.date')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.type')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.status')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsHistory.headers.netAmount')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.method')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.account')}
+                      </TableHead>
+                      <TableHead>
+                        {t('settlementsHistory.headers.reconciled')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsHistory.headers.actions')}
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -1123,7 +1065,7 @@ export default function TituloDetalhePage() {
                             </TableCell>
                             <TableCell>
                               <span className="rounded-md border px-2 py-1 text-xs font-medium">
-                                NORMAL
+                                {t('settlementsHistory.normalType')}
                               </span>
                             </TableCell>
                             <TableCell>
@@ -1158,8 +1100,8 @@ export default function TituloDetalhePage() {
                                 }`}
                               >
                                 {group.normal.reconciled
-                                  ? 'Conciliado'
-                                  : 'Pendente'}
+                                  ? t('settlementsHistory.reconciled.yes')
+                                  : t('settlementsHistory.reconciled.no')}
                               </span>
                             </TableCell>
                             <TableCell className="text-right">
@@ -1181,8 +1123,10 @@ export default function TituloDetalhePage() {
                                   >
                                     {unreconcilingId ===
                                     group.normal.reconciliationId
-                                      ? 'Desconciliando...'
-                                      : 'Desconciliar'}
+                                      ? t(
+                                          'settlementsHistory.unreconcileLoading'
+                                        )
+                                      : t('settlementsHistory.unreconcile')}
                                   </Button>
                                 ) : null}
 
@@ -1191,7 +1135,7 @@ export default function TituloDetalhePage() {
                                   size="sm"
                                   title={
                                     group.normal.reconciled
-                                      ? 'Desconciliar primeiro'
+                                      ? t('settlementsHistory.unreconcileFirst')
                                       : undefined
                                   }
                                   disabled={!canReverseNormal}
@@ -1202,7 +1146,7 @@ export default function TituloDetalhePage() {
                                   }}
                                 >
                                   <Undo className="mr-2 h-4 w-4" />
-                                  Estornar
+                                  {t('settlementsHistory.reverse')}
                                 </Button>
 
                                 <Button
@@ -1229,12 +1173,12 @@ export default function TituloDetalhePage() {
                               </TableCell>
                               <TableCell>
                                 <span className="rounded-md border px-2 py-1 text-xs font-medium">
-                                  REVERSAL
+                                  {t('settlementsHistory.reversalType')}
                                 </span>
                               </TableCell>
                               <TableCell>
                                 <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-muted-foreground">
-                                  ESTORNO
+                                  {t('settlementsHistory.reversedStatus')}
                                 </span>
                               </TableCell>
                               <TableCell className="text-right font-medium text-destructive">
@@ -1260,7 +1204,7 @@ export default function TituloDetalhePage() {
                               <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
+                                    {t('settlementsHistory.allocationsTitle')}
                                   </p>
                                   <div className="space-y-1">
                                     {group.allocations.map((allocation) => (
@@ -1269,7 +1213,10 @@ export default function TituloDetalhePage() {
                                         className="flex items-center justify-between text-sm"
                                       >
                                         <span>
-                                          Parcela #{allocation.installmentSeq}
+                                          {t(
+                                            'settlementsHistory.allocationInstallment'
+                                          )}{' '}
+                                          #{allocation.installmentSeq}
                                         </span>
                                         <span className="font-medium">
                                           +