@hed-hog/finance 0.0.253 → 0.0.256

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

@@ -1,17 +1,6 @@
 'use client';
 
 import { Page, PageHeader } from '@/components/entity-list';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
 import { AuditTimeline } from '@/components/ui/audit-timeline';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -38,6 +27,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,
@@ -78,19 +68,17 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+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 TituloReceberDetalhePage() {
   const t = useTranslations('finance.ReceivableInstallmentDetailPage');
@@ -117,6 +105,16 @@ export default function TituloReceberDetalhePage() {
       parcela.status === 'vencido'
   );
 
+  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 settleForm = useForm<SettleFormValues>({
     resolver: zodResolver(settleSchema),
     defaultValues: {
@@ -132,6 +130,10 @@ export default function TituloReceberDetalhePage() {
   const [isApproving, setIsApproving] = useState(false);
   const [isSettling, setIsSettling] = useState(false);
   const [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
+  const [isReverseSheetOpen, setIsReverseSheetOpen] = useState(false);
+  const [selectedSettlementIdToReverse, setSelectedSettlementIdToReverse] =
+    useState<string | null>(null);
+  const [reverseReason, setReverseReason] = useState('');
   const [reversingSettlementId, setReversingSettlementId] = useState<
     string | null
   >(null);
@@ -273,11 +275,6 @@ export default function TituloReceberDetalhePage() {
     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')
@@ -325,10 +322,7 @@ export default function TituloReceberDetalhePage() {
         return [...current, newTag];
       });
 
-      showToastHandler?.(
-        'success',
-        tTagSelector('messages.createSuccess', 'Tag criada com sucesso')
-      );
+      showToastHandler?.('success', t('tagSelector.messages.createSuccess'));
 
       return {
         id: newTag.id,
@@ -336,10 +330,7 @@ export default function TituloReceberDetalhePage() {
         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);
@@ -366,18 +357,12 @@ export default function TituloReceberDetalhePage() {
         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 canSettle = ['aberto', 'parcial'].includes(titulo.status);
+  const canSettle = ['aberto', 'parcial', 'vencido'].includes(titulo.status);
 
   const getErrorMessage = (error: any, fallback: string) => {
     const message = error?.response?.data?.message;
@@ -406,11 +391,11 @@ export default function TituloReceberDetalhePage() {
       });
 
       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);
@@ -436,18 +421,21 @@ export default function TituloReceberDetalhePage() {
 
       await refetch();
       setIsSettleDialogOpen(false);
-      showToastHandler?.('success', 'Recebimento registrado com sucesso');
+      showToastHandler?.('success', t('messages.settleSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível registrar o recebimento')
+        getErrorMessage(error, t('messages.settleError'))
       );
     } finally {
       setIsSettling(false);
     }
   };
 
-  const handleReverseSettlement = async (settlementId: string) => {
+  const handleReverseSettlement = async (
+    settlementId: string,
+    reasonOverride?: string
+  ) => {
     if (!settlementId || reversingSettlementId) {
       return;
     }
@@ -455,17 +443,27 @@ export default function TituloReceberDetalhePage() {
     setReversingSettlementId(settlementId);
     try {
       await request({
-        url: `/finance/accounts-receivable/installments/${titulo.id}/settlements/${settlementId}/reverse`,
-        method: 'PATCH',
-        data: {},
+        url: `/finance/settlements/${settlementId}/reverse`,
+        method: 'POST',
+        data: {
+          reason:
+            reasonOverride?.trim() ||
+            reverseReason?.trim() ||
+            t('messages.reverseDefaultReason'),
+          memo:
+            reasonOverride?.trim() ||
+            reverseReason?.trim() ||
+            t('messages.reverseDefaultReason'),
+        },
       });
 
       await refetch();
-      showToastHandler?.('success', 'Estorno realizado com sucesso');
+      setReverseReason('');
+      showToastHandler?.('success', t('messages.reverseSuccess'));
     } catch (error) {
       showToastHandler?.(
         'error',
-        getErrorMessage(error, 'Não foi possível estornar o recebimento')
+        getErrorMessage(error, t('messages.reverseError'))
       );
     } finally {
       setReversingSettlementId(null);
@@ -505,7 +503,7 @@ export default function TituloReceberDetalhePage() {
                   onClick={() => void handleApprove()}
                 >
                   <CheckCircle className="mr-2 h-4 w-4" />
-                  Aprovar
+                  {t('actions.approve')}
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={!canSettle || settleCandidates.length === 0}
@@ -527,9 +525,9 @@ export default function TituloReceberDetalhePage() {
             >
               <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
                 <SheetHeader>
-                  <SheetTitle>Registrar recebimento</SheetTitle>
+                  <SheetTitle>{t('settleSheet.title')}</SheetTitle>
                   <SheetDescription>
-                    Informe a parcela e o valor para baixa parcial ou total.
+                    {t('settleSheet.description')}
                   </SheetDescription>
                 </SheetHeader>
 
@@ -543,7 +541,9 @@ export default function TituloReceberDetalhePage() {
                       name="installmentId"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Parcela</FormLabel>
+                          <FormLabel>
+                            {t('settleSheet.installmentLabel')}
+                          </FormLabel>
                           <Select
                             value={field.value}
                             onValueChange={(value) => {
@@ -564,17 +564,23 @@ export default function TituloReceberDetalhePage() {
                           >
                             <FormControl>
                               <SelectTrigger>
-                                <SelectValue placeholder="Selecione" />
+                                <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>
@@ -589,7 +595,7 @@ export default function TituloReceberDetalhePage() {
                       name="amount"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Valor</FormLabel>
+                          <FormLabel>{t('settleSheet.amountLabel')}</FormLabel>
                           <FormControl>
                             <InputMoney
                               value={Number(field.value || 0)}
@@ -608,7 +614,9 @@ export default function TituloReceberDetalhePage() {
                       name="description"
                       render={({ field }) => (
                         <FormItem>
-                          <FormLabel>Descrição (opcional)</FormLabel>
+                          <FormLabel>
+                            {t('settleSheet.descriptionLabel')}
+                          </FormLabel>
                           <FormControl>
                             <Input {...field} value={field.value || ''} />
                           </FormControl>
@@ -624,16 +632,85 @@ export default function TituloReceberDetalhePage() {
                         disabled={isSettling}
                         onClick={() => setIsSettleDialogOpen(false)}
                       >
-                        Cancelar
+                        {t('common.cancel')}
                       </Button>
                       <Button type="submit" disabled={isSettling}>
-                        Confirmar recebimento
+                        {t('settleSheet.confirm')}
                       </Button>
                     </div>
                   </form>
                 </Form>
               </SheetContent>
             </Sheet>
+
+            <Sheet
+              open={isReverseSheetOpen}
+              onOpenChange={(open) => {
+                setIsReverseSheetOpen(open);
+
+                if (!open) {
+                  setSelectedSettlementIdToReverse(null);
+                  setReverseReason('');
+                }
+              }}
+            >
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>{t('reverseSheet.title')}</SheetTitle>
+                  <SheetDescription>
+                    {t('reverseSheet.description')}
+                  </SheetDescription>
+                </SheetHeader>
+
+                <div className="space-y-4 px-4">
+                  <div className="space-y-2">
+                    <Label>{t('reverseSheet.reasonLabel')}</Label>
+                    <Input
+                      value={reverseReason}
+                      onChange={(event) => setReverseReason(event.target.value)}
+                      placeholder={t('reverseSheet.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(() => {
+                          setIsReverseSheetOpen(false);
+                          setSelectedSettlementIdToReverse(null);
+                          setReverseReason('');
+                        });
+                      }}
+                    >
+                      {t('reverseSheet.confirm')}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      disabled={!!reversingSettlementId}
+                      onClick={() => {
+                        setIsReverseSheetOpen(false);
+                        setSelectedSettlementIdToReverse(null);
+                        setReverseReason('');
+                      }}
+                    >
+                      {t('common.cancel')}
+                    </Button>
+                  </div>
+                </div>
+              </SheetContent>
+            </Sheet>
           </div>
         }
       />
@@ -711,35 +788,21 @@ export default function TituloReceberDetalhePage() {
                     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>
@@ -839,7 +902,9 @@ export default function TituloReceberDetalhePage() {
                       </TableHead>
                       <TableHead>{t('receiptsTable.account')}</TableHead>
                       <TableHead>{t('receiptsTable.method')}</TableHead>
-                      <TableHead className="text-right">Ações</TableHead>
+                      <TableHead className="text-right">
+                        {t('receiptsTable.actions')}
+                      </TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -863,47 +928,25 @@ export default function TituloReceberDetalhePage() {
                               {liq.metodo}
                             </TableCell>
                             <TableCell className="text-right">
-                              <AlertDialog>
-                                <AlertDialogTrigger asChild>
-                                  <Button
-                                    variant="outline"
-                                    size="sm"
-                                    disabled={
-                                      !liq.settlementId ||
-                                      liq.status === 'reversed' ||
-                                      !!reversingSettlementId
-                                    }
-                                  >
-                                    <Undo className="mr-2 h-4 w-4" />
-                                    Estornar
-                                  </Button>
-                                </AlertDialogTrigger>
-                                <AlertDialogContent>
-                                  <AlertDialogHeader>
-                                    <AlertDialogTitle>
-                                      Confirmar estorno
-                                    </AlertDialogTitle>
-                                    <AlertDialogDescription>
-                                      Esta ação estorna o recebimento e
-                                      recalcula saldos e status.
-                                    </AlertDialogDescription>
-                                  </AlertDialogHeader>
-                                  <AlertDialogFooter>
-                                    <AlertDialogCancel>
-                                      Cancelar
-                                    </AlertDialogCancel>
-                                    <AlertDialogAction
-                                      onClick={() =>
-                                        void handleReverseSettlement(
-                                          String(liq.settlementId)
-                                        )
-                                      }
-                                    >
-                                      Confirmar estorno
-                                    </AlertDialogAction>
-                                  </AlertDialogFooter>
-                                </AlertDialogContent>
-                              </AlertDialog>
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                disabled={
+                                  !liq.settlementId ||
+                                  liq.status === 'reversed' ||
+                                  !!reversingSettlementId
+                                }
+                                onClick={() => {
+                                  setSelectedSettlementIdToReverse(
+                                    String(liq.settlementId)
+                                  );
+                                  setReverseReason('');
+                                  setIsReverseSheetOpen(true);
+                                }}
+                              >
+                                <Undo className="mr-2 h-4 w-4" />
+                                {t('receiptsTable.reverseButton')}
+                              </Button>
                             </TableCell>
                           </TableRow>
                         );