@hed-hog/finance 0.0.238 → 0.0.240

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

@@ -1,6 +1,17 @@
 '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 { Button } from '@/components/ui/button';
 import {
@@ -10,6 +21,14 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,7 +36,24 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
 import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { StatusBadge } from '@/components/ui/status-badge';
 import {
   Table,
@@ -30,6 +66,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { TagSelectorSheet } from '@/components/ui/tag-selector-sheet';
 import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   CheckCircle,
   Download,
@@ -41,17 +78,28 @@ 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';
 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>;
+
 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 } = useFinanceData();
+  const { data, refetch } = useFinanceData();
   const {
     titulosPagar,
     pessoas,
@@ -64,9 +112,33 @@ export default function TituloDetalhePage() {
 
   const titulo = titulosPagar.find((t) => t.id === id);
 
+  const settleCandidates = (titulo?.parcelas || []).filter(
+    (parcela: any) =>
+      parcela.status === 'aberto' ||
+      parcela.status === 'parcial' ||
+      parcela.status === 'vencido'
+  );
+
+  const settleForm = useForm<SettleFormValues>({
+    resolver: zodResolver(settleSchema),
+    defaultValues: {
+      installmentId: settleCandidates[0]?.id || '',
+      amount: Number(settleCandidates[0]?.valorAberto || 0),
+      description: '',
+    },
+  });
+
   const [availableTags, setAvailableTags] = useState<any[]>([]);
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
   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);
 
   useEffect(() => {
     setAvailableTags(tags || []);
@@ -80,6 +152,27 @@ export default function TituloDetalhePage() {
     setSelectedTagIds(Array.isArray(titulo.tags) ? titulo.tags : []);
   }, [titulo]);
 
+  useEffect(() => {
+    const firstCandidate = settleCandidates[0];
+    const nextInstallmentId = firstCandidate?.id || '';
+    const nextAmount = Number(firstCandidate?.valorAberto || 0);
+    const currentInstallmentId = settleForm.getValues('installmentId') || '';
+    const currentAmount = Number(settleForm.getValues('amount') || 0);
+
+    if (
+      currentInstallmentId === nextInstallmentId &&
+      currentAmount === nextAmount
+    ) {
+      return;
+    }
+
+    settleForm.reset({
+      installmentId: nextInstallmentId,
+      amount: nextAmount,
+      description: '',
+    });
+  }, [settleForm, settleCandidates]);
+
   if (!titulo) {
     return (
       <div className="space-y-6">
@@ -267,6 +360,130 @@ 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 getErrorMessage = (error: any, fallback: string) => {
+    const message = error?.response?.data?.message;
+
+    if (Array.isArray(message)) {
+      return message.join(', ');
+    }
+
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+
+    return fallback;
+  };
+
+  const handleApprove = async () => {
+    if (!canApprove || isApproving) {
+      return;
+    }
+
+    setIsApproving(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/approve`,
+        method: 'PATCH',
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Título aprovado com sucesso');
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, 'Não foi possível aprovar o título')
+      );
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+  const handleSettle = async (values: SettleFormValues) => {
+    if (!canSettle || isSettling) {
+      return;
+    }
+
+    setIsSettling(true);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/settlements`,
+        method: 'POST',
+        data: {
+          installment_id: Number(values.installmentId),
+          amount: values.amount,
+          description: values.description?.trim() || undefined,
+        },
+      });
+
+      await refetch();
+      setIsSettleDialogOpen(false);
+      showToastHandler?.('success', 'Baixa registrada com sucesso');
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, 'Não foi possível registrar a baixa')
+      );
+    } finally {
+      setIsSettling(false);
+    }
+  };
+
+  const handleReverseSettlement = async (settlementId: string) => {
+    if (!settlementId || reversingSettlementId) {
+      return;
+    }
+
+    setReversingSettlementId(settlementId);
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${titulo.id}/settlements/${settlementId}/reverse`,
+        method: 'PATCH',
+        data: {},
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Estorno realizado com sucesso');
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, 'Não foi possível estornar a liquidação')
+      );
+    } finally {
+      setReversingSettlementId(null);
+    }
+  };
+
+  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
@@ -291,29 +508,187 @@ 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>
-                <DropdownMenuItem>
+                <DropdownMenuItem
+                  disabled={!canApprove || isApproving}
+                  onClick={() => void handleApprove()}
+                >
                   <CheckCircle className="mr-2 h-4 w-4" />
                   {t('actions.approve')}
                 </DropdownMenuItem>
-                <DropdownMenuItem>
+                <DropdownMenuItem
+                  disabled={!canSettle || settleCandidates.length === 0}
+                  onClick={() => setIsSettleDialogOpen(true)}
+                >
                   <Download className="mr-2 h-4 w-4" />
                   {t('actions.settle')}
                 </DropdownMenuItem>
-                <DropdownMenuItem>
+                <DropdownMenuItem disabled>
                   <Undo className="mr-2 h-4 w-4" />
                   {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}
+            >
+              <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>
+
+                <Form {...settleForm}>
+                  <form
+                    className="space-y-4"
+                    onSubmit={settleForm.handleSubmit(handleSettle)}
+                  >
+                    <FormField
+                      control={settleForm.control}
+                      name="installmentId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Parcela</FormLabel>
+                          <Select
+                            value={field.value}
+                            onValueChange={(value) => {
+                              field.onChange(value);
+
+                              const selected = settleCandidates.find(
+                                (parcela: any) => parcela.id === value
+                              );
+
+                              if (selected) {
+                                settleForm.setValue(
+                                  'amount',
+                                  Number(selected.valorAberto || 0),
+                                  { shouldValidate: true }
+                                );
+                              }
+                            }}
+                          >
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder="Selecione" />
+                              </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))}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={settleForm.control}
+                      name="amount"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Valor</FormLabel>
+                          <FormControl>
+                            <InputMoney
+                              value={Number(field.value || 0)}
+                              onValueChange={(value) => {
+                                field.onChange(Number(value || 0));
+                              }}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={settleForm.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Descrição (opcional)</FormLabel>
+                          <FormControl>
+                            <Input {...field} value={field.value || ''} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <DialogFooter>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        disabled={isSettling}
+                        onClick={() => setIsSettleDialogOpen(false)}
+                      >
+                        Cancelar
+                      </Button>
+                      <Button type="submit" disabled={isSettling}>
+                        Confirmar baixa
+                      </Button>
+                    </DialogFooter>
+                  </form>
+                </Form>
+              </DialogContent>
+            </Dialog>
           </div>
         }
       />
@@ -358,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')}
@@ -522,6 +905,7 @@ export default function TituloDetalhePage() {
                       </TableHead>
                       <TableHead>{t('settlementsTable.account')}</TableHead>
                       <TableHead>{t('settlementsTable.method')}</TableHead>
+                      <TableHead className="text-right">Ações</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -547,6 +931,49 @@ export default function TituloDetalhePage() {
                             <TableCell className="capitalize">
                               {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 cria o estorno da liquidação e
+                                      recalcula saldos e status.
+                                    </AlertDialogDescription>
+                                  </AlertDialogHeader>
+                                  <AlertDialogFooter>
+                                    <AlertDialogCancel>
+                                      Cancelar
+                                    </AlertDialogCancel>
+                                    <AlertDialogAction
+                                      onClick={() =>
+                                        void handleReverseSettlement(
+                                          String(liq.settlementId)
+                                        )
+                                      }
+                                    >
+                                      Confirmar estorno
+                                    </AlertDialogAction>
+                                  </AlertDialogFooter>
+                                </AlertDialogContent>
+                              </AlertDialog>
+                            </TableCell>
                           </TableRow>
                         );
                       })