@hed-hog/finance 0.0.237 → 0.0.239

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

@@ -1,8 +1,18 @@
 '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';
 import {
   Card,
@@ -11,6 +21,14 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,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,
@@ -29,8 +64,10 @@ import {
   TableRow,
 } from '@/components/ui/table';
 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 {
-  ArrowLeft,
   CheckCircle,
   Download,
   Edit,
@@ -42,14 +79,26 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useParams } 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 params = useParams<{ id: string }>();
   const id = params?.id;
-  const { data } = useFinanceData();
+  const { data, refetch } = useFinanceData();
   const {
     titulosPagar,
     pessoas,
@@ -62,6 +111,65 @@ 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 [isSettleDialogOpen, setIsSettleDialogOpen] = useState(false);
+  const [reversingSettlementId, setReversingSettlementId] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    setAvailableTags(tags || []);
+  }, [tags]);
+
+  useEffect(() => {
+    if (!titulo) {
+      return;
+    }
+
+    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">
@@ -95,9 +203,20 @@ export default function TituloDetalhePage() {
   const fornecedor = getPessoaById(titulo.fornecedorId);
   const categoria = getCategoriaById(titulo.categoriaId);
   const centroCusto = getCentroCustoById(titulo.centroCustoId);
-  const tituloTags = titulo.tags
-    .map((tagId: any) => tags.find((t: any) => t.id === tagId))
-    .filter(Boolean);
+
+  const tagOptions = availableTags.map((tag) => ({
+    id: String(tag.id),
+    name: String(tag.nome || ''),
+    color: tag.cor,
+    usageCount:
+      typeof tag.usageCount === 'number'
+        ? tag.usageCount
+        : typeof tag.usoCount === 'number'
+          ? tag.usoCount
+          : typeof tag.count === 'number'
+            ? tag.count
+            : undefined,
+  }));
 
   const auditEvents = logsAuditoria
     .filter(
@@ -113,64 +232,398 @@ export default function TituloDetalhePage() {
       depois: log.depois,
     }));
 
+  const attachmentDetails = Array.isArray(titulo.anexosDetalhes)
+    ? titulo.anexosDetalhes
+    : (titulo.anexos || []).map((nome: string) => ({ nome }));
+
+  const handleOpenAttachment = async (fileId?: string) => {
+    if (!fileId) {
+      return;
+    }
+
+    const response = await request<{ url?: string }>({
+      url: `/file/open/${fileId}`,
+      method: 'PUT',
+    });
+
+    const url = response?.data?.url;
+    if (!url) {
+      return;
+    }
+
+    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')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)+/g, '');
+  };
+
+  const handleCreateTag = async (name: string) => {
+    const slug = toTagSlug(name);
+
+    if (!slug) {
+      return null;
+    }
+
+    setIsCreatingTag(true);
+    try {
+      const response = await request<{
+        id?: string | number;
+        nome?: string;
+        cor?: string;
+      }>({
+        url: '/finance/tags',
+        method: 'POST',
+        data: {
+          name: slug,
+          color: '#000000',
+        },
+      });
+
+      const created = response?.data;
+      const newTag = {
+        id: String(created?.id || `temp-${Date.now()}`),
+        nome: created?.nome || slug,
+        cor: created?.cor || '#000000',
+      };
+
+      setAvailableTags((current) => {
+        if (current.some((tag) => String(tag.id) === newTag.id)) {
+          return current;
+        }
+
+        return [...current, newTag];
+      });
+
+      showToastHandler?.(
+        'success',
+        tTagSelector('messages.createSuccess', 'Tag criada com sucesso')
+      );
+
+      return {
+        id: newTag.id,
+        name: newTag.nome,
+        color: newTag.cor,
+      };
+    } catch {
+      showToastHandler?.(
+        'error',
+        tTagSelector('messages.createError', 'Não foi possível criar a tag')
+      );
+      return null;
+    } finally {
+      setIsCreatingTag(false);
+    }
+  };
+
+  const handleChangeTags = async (nextTagIds: string[]) => {
+    if (!titulo?.id) {
+      return;
+    }
+
+    try {
+      const response = await request<{ tags?: string[] }>({
+        url: `/finance/accounts-payable/installments/${titulo.id}/tags`,
+        method: 'PATCH',
+        data: {
+          tag_ids: nextTagIds.map((tagId) => Number(tagId)),
+        },
+      });
+
+      if (Array.isArray(response?.data?.tags)) {
+        setSelectedTagIds(response.data.tags);
+      } else {
+        setSelectedTagIds(nextTagIds);
+      }
+    } catch {
+      showToastHandler?.(
+        'error',
+        tTagSelector(
+          'messages.updateError',
+          'Não foi possível atualizar as tags'
+        )
+      );
+    }
+  };
+
+  const canApprove = titulo.status === 'rascunho';
+  const canSettle = ['aprovado', 'aberto', 'parcial'].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);
+    }
+  };
+
   return (
     <Page>
-      <div className="flex items-center gap-4">
-        <Button variant="ghost" size="icon" asChild>
-          <Link href="/finance/accounts-payable/installments">
-            <ArrowLeft className="h-4 w-4" />
-          </Link>
-        </Button>
-        <PageHeader
-          title={titulo.documento}
-          description={titulo.descricao}
-          breadcrumbs={[
-            { label: t('breadcrumbs.home'), href: '/' },
-            { label: t('breadcrumbs.finance'), href: '/finance' },
-            {
-              label: t('breadcrumbs.payables'),
-              href: '/finance/accounts-payable/installments',
-            },
-            { label: titulo.documento },
-          ]}
-          actions={
-            <div className="flex items-center gap-2">
-              <StatusBadge status={titulo.status} />
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline">
-                    <MoreHorizontal className="mr-2 h-4 w-4" />
-                    {t('actions.title')}
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuItem>
-                    <Edit className="mr-2 h-4 w-4" />
-                    {t('actions.edit')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <CheckCircle className="mr-2 h-4 w-4" />
-                    {t('actions.approve')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Download className="mr-2 h-4 w-4" />
-                    {t('actions.settle')}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Undo className="mr-2 h-4 w-4" />
-                    {t('actions.reverse')}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem className="text-destructive">
-                    <XCircle className="mr-2 h-4 w-4" />
-                    {t('actions.cancel')}
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          }
-        />
-      </div>
+      <PageHeader
+        title={titulo.documento}
+        description={titulo.descricao}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.payables'),
+            href: '/finance/accounts-payable/installments',
+          },
+          { label: titulo.documento },
+        ]}
+        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>
+                  <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>
+                  <Undo className="mr-2 h-4 w-4" />
+                  {t('actions.reverse')}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive">
+                  <XCircle className="mr-2 h-4 w-4" />
+                  {t('actions.cancel')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <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>
+        }
+      />
 
       <div className="grid gap-6 lg:grid-cols-3">
         <Card className="lg:col-span-2">
@@ -234,20 +687,44 @@ export default function TituloDetalhePage() {
                 <dt className="text-sm font-medium text-muted-foreground">
                   {t('documentData.tags')}
                 </dt>
-                <dd className="mt-1 flex gap-1">
-                  {tituloTags.length > 0 ? (
-                    tituloTags.map((tag: any) => (
-                      <Badge
-                        key={tag?.id}
-                        variant="outline"
-                        style={{ borderColor: tag?.cor, color: tag?.cor }}
-                      >
-                        {tag?.nome}
-                      </Badge>
-                    ))
-                  ) : (
-                    <span className="text-muted-foreground">-</span>
-                  )}
+                <dd className="mt-1">
+                  <TagSelectorSheet
+                    selectedTagIds={selectedTagIds}
+                    tags={tagOptions}
+                    onChange={handleChangeTags}
+                    onCreateTag={handleCreateTag}
+                    disabled={isCreatingTag}
+                    emptyText={tTagSelector('noTags', 'Sem tags')}
+                    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'),
+                      removeTagAria: (tagName: string) =>
+                        t.has('tagSelector.removeTagAria')
+                          ? t('tagSelector.removeTagAria', { tag: tagName })
+                          : `Remover tag ${tagName}`,
+                    }}
+                  />
                 </dd>
               </div>
             </dl>
@@ -260,16 +737,17 @@ export default function TituloDetalhePage() {
             <CardDescription>{t('attachments.description')}</CardDescription>
           </CardHeader>
           <CardContent>
-            {titulo.anexos.length > 0 ? (
+            {attachmentDetails.length > 0 ? (
               <ul className="space-y-2">
-                {titulo.anexos.map((anexo: any, i: number) => (
+                {attachmentDetails.map((anexo: any, i: number) => (
                   <li key={i}>
                     <Button
                       variant="ghost"
                       className="h-auto w-full justify-start p-2"
+                      onClick={() => void handleOpenAttachment(anexo?.id)}
                     >
                       <FileText className="mr-2 h-4 w-4" />
-                      {anexo}
+                      {anexo?.nome}
                     </Button>
                   </li>
                 ))}
@@ -351,6 +829,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>
@@ -376,6 +855,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>
                         );
                       })