@hed-hog/finance 0.0.274 → 0.0.276

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

@@ -1,982 +1,982 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { AuditTimeline } from '@/components/ui/audit-timeline';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  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 { Label } from '@/components/ui/label';
-import { Money } from '@/components/ui/money';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  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 {
-  CheckCircle,
-  Download,
-  Edit,
-  FileText,
-  MoreHorizontal,
-  Send,
-  Undo,
-} from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { formatarData } from '../../../_lib/formatters';
-import { useFinanceData } from '../../../_lib/use-finance-data';
-
-type SettleFormValues = {
-  installmentId: string;
-  amount: number;
-  description?: string;
-};
-
-export default function TituloReceberDetalhePage() {
-  const t = useTranslations('finance.ReceivableInstallmentDetailPage');
-  const { request, showToastHandler } = useApp();
-  const params = useParams<{ id: string }>();
-  const id = params?.id;
-  const { data, refetch } = useFinanceData();
-  const {
-    titulosReceber,
-    pessoas,
-    categorias,
-    centrosCusto,
-    contasBancarias,
-    logsAuditoria,
-    tags,
-  } = data;
-
-  const titulo = titulosReceber.find((t) => t.id === id);
-
-  const settleCandidates = (titulo?.parcelas || []).filter(
-    (parcela: any) =>
-      parcela.status === 'aberto' ||
-      parcela.status === 'parcial' ||
-      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: {
-      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 [isReverseSheetOpen, setIsReverseSheetOpen] = useState(false);
-  const [selectedSettlementIdToReverse, setSelectedSettlementIdToReverse] =
-    useState<string | null>(null);
-  const [reverseReason, setReverseReason] = useState('');
-  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: '',
-    });
-  }, [settleCandidates, settleForm]);
-
-  const canalBadge = {
-    boleto: {
-      label: t('channels.boleto'),
-      className: 'bg-blue-100 text-blue-700',
-    },
-    pix: { label: 'PIX', className: 'bg-green-100 text-green-700' },
-    cartao: {
-      label: t('channels.card'),
-      className: 'bg-purple-100 text-purple-700',
-    },
-    transferencia: {
-      label: t('channels.transfer'),
-      className: 'bg-orange-100 text-orange-700',
-    },
-  };
-
-  if (!titulo) {
-    return (
-      <div className="space-y-6">
-        <PageHeader
-          title={t('notFound.title')}
-          description={t('notFound.description')}
-          breadcrumbs={[
-            {
-              label: t('notFound.breadcrumbReceivables'),
-              href: '/finance/accounts-receivable/installments',
-            },
-            {
-              label: t('notFound.breadcrumbInstallments'),
-              href: '/finance/accounts-receivable/installments',
-            },
-          ]}
-        />
-      </div>
-    );
-  }
-
-  const getPessoaById = (personId?: string) =>
-    pessoas.find((p) => p.id === personId);
-  const getCategoriaById = (categoryId?: string) =>
-    categorias.find((c) => c.id === categoryId);
-  const getCentroCustoById = (costCenterId?: string) =>
-    centrosCusto.find((c) => c.id === costCenterId);
-  const getContaBancariaById = (bankId?: string) =>
-    contasBancarias.find((c) => c.id === bankId);
-
-  const cliente = getPessoaById(titulo.clienteId);
-  const categoria = getCategoriaById(titulo.categoriaId);
-  const centroCusto = getCentroCustoById(titulo.centroCustoId);
-
-  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 canal =
-    canalBadge[titulo.canal as keyof typeof canalBadge] ||
-    canalBadge.transferencia;
-
-  const auditEvents = logsAuditoria
-    .filter(
-      (log) => log.entidadeId === titulo.id && log.entidade === 'TituloReceber'
-    )
-    .map((log) => ({
-      id: log.id,
-      data: log.data,
-      usuarioId: log.usuarioId,
-      acao: log.acao,
-      detalhes: log.detalhes,
-      antes: log.antes,
-      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 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', t('tagSelector.messages.createSuccess'));
-
-      return {
-        id: newTag.id,
-        name: newTag.nome,
-        color: newTag.cor,
-      };
-    } catch {
-      showToastHandler?.('error', t('tagSelector.messages.createError'));
-      return null;
-    } finally {
-      setIsCreatingTag(false);
-    }
-  };
-
-  const handleChangeTags = async (nextTagIds: string[]) => {
-    if (!titulo?.id) {
-      return;
-    }
-
-    try {
-      const response = await request<{ tags?: string[] }>({
-        url: `/finance/accounts-receivable/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', t('tagSelector.messages.updateError'));
-    }
-  };
-
-  const canApprove = titulo.status === 'rascunho';
-  const canSettle = ['aberto', 'parcial', 'vencido'].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-receivable/installments/${titulo.id}/approve`,
-        method: 'PATCH',
-      });
-
-      await refetch();
-      showToastHandler?.('success', t('messages.approveSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.approveError'))
-      );
-    } finally {
-      setIsApproving(false);
-    }
-  };
-
-  const handleSettle = async (values: SettleFormValues) => {
-    if (!canSettle || isSettling) {
-      return;
-    }
-
-    setIsSettling(true);
-    try {
-      await request({
-        url: `/finance/accounts-receivable/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', t('messages.settleSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.settleError'))
-      );
-    } finally {
-      setIsSettling(false);
-    }
-  };
-
-  const handleReverseSettlement = async (
-    settlementId: string,
-    reasonOverride?: string
-  ) => {
-    if (!settlementId || reversingSettlementId) {
-      return;
-    }
-
-    setReversingSettlementId(settlementId);
-    try {
-      await request({
-        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();
-      setReverseReason('');
-      showToastHandler?.('success', t('messages.reverseSuccess'));
-    } catch (error) {
-      showToastHandler?.(
-        'error',
-        getErrorMessage(error, t('messages.reverseError'))
-      );
-    } finally {
-      setReversingSettlementId(null);
-    }
-  };
-
-  return (
-    <Page>
-      <PageHeader
-        title={titulo.documento}
-        description={titulo.descricao}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          {
-            label: t('breadcrumbs.receivables'),
-            href: '/finance/accounts-receivable/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.registerReceipt')}
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Send className="mr-2 h-4 w-4" />
-                  {t('actions.sendCollection')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <Sheet
-              open={isSettleDialogOpen}
-              onOpenChange={setIsSettleDialogOpen}
-            >
-              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
-                <SheetHeader>
-                  <SheetTitle>{t('settleSheet.title')}</SheetTitle>
-                  <SheetDescription>
-                    {t('settleSheet.description')}
-                  </SheetDescription>
-                </SheetHeader>
-
-                <Form {...settleForm}>
-                  <form
-                    className="space-y-4 px-1"
-                    onSubmit={settleForm.handleSubmit(handleSettle)}
-                  >
-                    <FormField
-                      control={settleForm.control}
-                      name="installmentId"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t('settleSheet.installmentLabel')}
-                          </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={t(
-                                    'settleSheet.installmentPlaceholder'
-                                  )}
-                                />
-                              </SelectTrigger>
-                            </FormControl>
-                            <SelectContent>
-                              {settleCandidates.map((parcela: any) => (
-                                <SelectItem key={parcela.id} value={parcela.id}>
-                                  {t('settleSheet.installmentOption', {
-                                    number: parcela.numero,
-                                    amount: 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>{t('settleSheet.amountLabel')}</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>
-                            {t('settleSheet.descriptionLabel')}
-                          </FormLabel>
-                          <FormControl>
-                            <Input {...field} value={field.value || ''} />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-
-                    <div className="flex justify-end gap-2 pt-2">
-                      <Button
-                        type="button"
-                        variant="outline"
-                        disabled={isSettling}
-                        onClick={() => setIsSettleDialogOpen(false)}
-                      >
-                        {t('common.cancel')}
-                      </Button>
-                      <Button type="submit" disabled={isSettling}>
-                        {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>
-        }
-      />
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>{t('documentData.title')}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <dl className="grid gap-4 sm:grid-cols-2">
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.client')}
-                </dt>
-                <dd className="mt-1">
-                  <Link
-                    href={`/cadastros/pessoas/${cliente?.id}`}
-                    className="hover:underline"
-                  >
-                    {cliente?.nome}
-                  </Link>
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.cnpjCpf')}
-                </dt>
-                <dd className="mt-1">{cliente?.documento}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.competency')}
-                </dt>
-                <dd className="mt-1">{titulo.competencia}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.totalValue')}
-                </dt>
-                <dd className="mt-1 text-lg font-semibold">
-                  <Money value={titulo.valorTotal} />
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.category')}
-                </dt>
-                <dd className="mt-1">{categoria?.nome}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.costCenter')}
-                </dt>
-                <dd className="mt-1">{centroCusto?.nome}</dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.channel')}
-                </dt>
-                <dd className="mt-1">
-                  <Badge className={canal.className} variant="outline">
-                    {canal.label}
-                  </Badge>
-                </dd>
-              </div>
-              <div>
-                <dt className="text-sm font-medium text-muted-foreground">
-                  {t('documentData.tags')}
-                </dt>
-                <dd className="mt-1">
-                  <TagSelectorSheet
-                    selectedTagIds={selectedTagIds}
-                    tags={tagOptions}
-                    onChange={handleChangeTags}
-                    onCreateTag={handleCreateTag}
-                    disabled={isCreatingTag}
-                    emptyText={t('tagSelector.noTags')}
-                    labels={{
-                      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('tagSelector.removeTagAria', { tag: tagName }),
-                    }}
-                  />
-                </dd>
-              </div>
-            </dl>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>{t('attachments.title')}</CardTitle>
-            <CardDescription>{t('attachments.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            {attachmentDetails.length > 0 ? (
-              <ul className="space-y-2">
-                {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?.nome}
-                    </Button>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                {t('attachments.none')}
-              </p>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="parcelas">
-        <TabsList>
-          <TabsTrigger value="parcelas">{t('tabs.installments')}</TabsTrigger>
-          <TabsTrigger value="liquidacoes">{t('tabs.receipts')}</TabsTrigger>
-          <TabsTrigger value="auditoria">{t('tabs.audit')}</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="parcelas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('installmentsTable.installment')}</TableHead>
-                    <TableHead>{t('installmentsTable.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('installmentsTable.value')}
-                    </TableHead>
-                    <TableHead>{t('installmentsTable.status')}</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {titulo.parcelas.map((parcela: any) => (
-                    <TableRow key={parcela.id}>
-                      <TableCell>
-                        {parcela.numero}/{titulo.parcelas.length}
-                      </TableCell>
-                      <TableCell>{formatarData(parcela.vencimento)}</TableCell>
-                      <TableCell className="text-right">
-                        <Money value={parcela.valor} />
-                      </TableCell>
-                      <TableCell>
-                        <StatusBadge status={parcela.status} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="liquidacoes" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              {titulo.parcelas.some((p: any) => p.liquidacoes.length > 0) ? (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>{t('receiptsTable.date')}</TableHead>
-                      <TableHead className="text-right">
-                        {t('receiptsTable.value')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('receiptsTable.interest')}
-                      </TableHead>
-                      <TableHead className="text-right">
-                        {t('receiptsTable.discount')}
-                      </TableHead>
-                      <TableHead>{t('receiptsTable.account')}</TableHead>
-                      <TableHead>{t('receiptsTable.method')}</TableHead>
-                      <TableHead className="text-right">
-                        {t('receiptsTable.actions')}
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {titulo.parcelas.flatMap((parcela: any) =>
-                      parcela.liquidacoes.map((liq: any) => {
-                        const conta = getContaBancariaById(liq.contaBancariaId);
-                        return (
-                          <TableRow key={liq.id}>
-                            <TableCell>{formatarData(liq.data)}</TableCell>
-                            <TableCell className="text-right">
-                              <Money value={liq.valor} />
-                            </TableCell>
-                            <TableCell className="text-right">
-                              <Money value={liq.juros} />
-                            </TableCell>
-                            <TableCell className="text-right">
-                              <Money value={liq.desconto} />
-                            </TableCell>
-                            <TableCell>{conta?.descricao}</TableCell>
-                            <TableCell className="capitalize">
-                              {liq.metodo}
-                            </TableCell>
-                            <TableCell className="text-right">
-                              <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>
-                        );
-                      })
-                    )}
-                  </TableBody>
-                </Table>
-              ) : (
-                <p className="text-center text-muted-foreground py-8">
-                  {t('receiptsTable.none')}
-                </p>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="auditoria" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              {auditEvents.length > 0 ? (
-                <AuditTimeline events={auditEvents} />
-              ) : (
-                <p className="text-center text-muted-foreground py-8">
-                  {t('audit.none')}
-                </p>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { AuditTimeline } from '@/components/ui/audit-timeline';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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 { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  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 {
+  CheckCircle,
+  Download,
+  Edit,
+  FileText,
+  MoreHorizontal,
+  Send,
+  Undo,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { formatarData } from '../../../_lib/formatters';
+import { useFinanceData } from '../../../_lib/use-finance-data';
+
+type SettleFormValues = {
+  installmentId: string;
+  amount: number;
+  description?: string;
+};
+
+export default function TituloReceberDetalhePage() {
+  const t = useTranslations('finance.ReceivableInstallmentDetailPage');
+  const { request, showToastHandler } = useApp();
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+  const { data, refetch } = useFinanceData();
+  const {
+    titulosReceber,
+    pessoas,
+    categorias,
+    centrosCusto,
+    contasBancarias,
+    logsAuditoria,
+    tags,
+  } = data;
+
+  const titulo = titulosReceber.find((t) => t.id === id);
+
+  const settleCandidates = (titulo?.parcelas || []).filter(
+    (parcela: any) =>
+      parcela.status === 'aberto' ||
+      parcela.status === 'parcial' ||
+      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: {
+      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 [isReverseSheetOpen, setIsReverseSheetOpen] = useState(false);
+  const [selectedSettlementIdToReverse, setSelectedSettlementIdToReverse] =
+    useState<string | null>(null);
+  const [reverseReason, setReverseReason] = useState('');
+  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: '',
+    });
+  }, [settleCandidates, settleForm]);
+
+  const canalBadge = {
+    boleto: {
+      label: t('channels.boleto'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+    pix: { label: 'PIX', className: 'bg-green-100 text-green-700' },
+    cartao: {
+      label: t('channels.card'),
+      className: 'bg-purple-100 text-purple-700',
+    },
+    transferencia: {
+      label: t('channels.transfer'),
+      className: 'bg-orange-100 text-orange-700',
+    },
+  };
+
+  if (!titulo) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title={t('notFound.title')}
+          description={t('notFound.description')}
+          breadcrumbs={[
+            {
+              label: t('notFound.breadcrumbReceivables'),
+              href: '/finance/accounts-receivable/installments',
+            },
+            {
+              label: t('notFound.breadcrumbInstallments'),
+              href: '/finance/accounts-receivable/installments',
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+
+  const getPessoaById = (personId?: string) =>
+    pessoas.find((p) => p.id === personId);
+  const getCategoriaById = (categoryId?: string) =>
+    categorias.find((c) => c.id === categoryId);
+  const getCentroCustoById = (costCenterId?: string) =>
+    centrosCusto.find((c) => c.id === costCenterId);
+  const getContaBancariaById = (bankId?: string) =>
+    contasBancarias.find((c) => c.id === bankId);
+
+  const cliente = getPessoaById(titulo.clienteId);
+  const categoria = getCategoriaById(titulo.categoriaId);
+  const centroCusto = getCentroCustoById(titulo.centroCustoId);
+
+  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 canal =
+    canalBadge[titulo.canal as keyof typeof canalBadge] ||
+    canalBadge.transferencia;
+
+  const auditEvents = logsAuditoria
+    .filter(
+      (log) => log.entidadeId === titulo.id && log.entidade === 'TituloReceber'
+    )
+    .map((log) => ({
+      id: log.id,
+      data: log.data,
+      usuarioId: log.usuarioId,
+      acao: log.acao,
+      detalhes: log.detalhes,
+      antes: log.antes,
+      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 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', t('tagSelector.messages.createSuccess'));
+
+      return {
+        id: newTag.id,
+        name: newTag.nome,
+        color: newTag.cor,
+      };
+    } catch {
+      showToastHandler?.('error', t('tagSelector.messages.createError'));
+      return null;
+    } finally {
+      setIsCreatingTag(false);
+    }
+  };
+
+  const handleChangeTags = async (nextTagIds: string[]) => {
+    if (!titulo?.id) {
+      return;
+    }
+
+    try {
+      const response = await request<{ tags?: string[] }>({
+        url: `/finance/accounts-receivable/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', t('tagSelector.messages.updateError'));
+    }
+  };
+
+  const canApprove = titulo.status === 'rascunho';
+  const canSettle = ['aberto', 'parcial', 'vencido'].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-receivable/installments/${titulo.id}/approve`,
+        method: 'PATCH',
+      });
+
+      await refetch();
+      showToastHandler?.('success', t('messages.approveSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.approveError'))
+      );
+    } finally {
+      setIsApproving(false);
+    }
+  };
+
+  const handleSettle = async (values: SettleFormValues) => {
+    if (!canSettle || isSettling) {
+      return;
+    }
+
+    setIsSettling(true);
+    try {
+      await request({
+        url: `/finance/accounts-receivable/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', t('messages.settleSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.settleError'))
+      );
+    } finally {
+      setIsSettling(false);
+    }
+  };
+
+  const handleReverseSettlement = async (
+    settlementId: string,
+    reasonOverride?: string
+  ) => {
+    if (!settlementId || reversingSettlementId) {
+      return;
+    }
+
+    setReversingSettlementId(settlementId);
+    try {
+      await request({
+        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();
+      setReverseReason('');
+      showToastHandler?.('success', t('messages.reverseSuccess'));
+    } catch (error) {
+      showToastHandler?.(
+        'error',
+        getErrorMessage(error, t('messages.reverseError'))
+      );
+    } finally {
+      setReversingSettlementId(null);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        title={titulo.documento}
+        description={titulo.descricao}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          {
+            label: t('breadcrumbs.receivables'),
+            href: '/finance/accounts-receivable/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.registerReceipt')}
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Send className="mr-2 h-4 w-4" />
+                  {t('actions.sendCollection')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Sheet
+              open={isSettleDialogOpen}
+              onOpenChange={setIsSettleDialogOpen}
+            >
+              <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+                <SheetHeader>
+                  <SheetTitle>{t('settleSheet.title')}</SheetTitle>
+                  <SheetDescription>
+                    {t('settleSheet.description')}
+                  </SheetDescription>
+                </SheetHeader>
+
+                <Form {...settleForm}>
+                  <form
+                    className="space-y-4 px-1"
+                    onSubmit={settleForm.handleSubmit(handleSettle)}
+                  >
+                    <FormField
+                      control={settleForm.control}
+                      name="installmentId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t('settleSheet.installmentLabel')}
+                          </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={t(
+                                    'settleSheet.installmentPlaceholder'
+                                  )}
+                                />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {settleCandidates.map((parcela: any) => (
+                                <SelectItem key={parcela.id} value={parcela.id}>
+                                  {t('settleSheet.installmentOption', {
+                                    number: parcela.numero,
+                                    amount: 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>{t('settleSheet.amountLabel')}</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>
+                            {t('settleSheet.descriptionLabel')}
+                          </FormLabel>
+                          <FormControl>
+                            <Input {...field} value={field.value || ''} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <div className="flex justify-end gap-2 pt-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        disabled={isSettling}
+                        onClick={() => setIsSettleDialogOpen(false)}
+                      >
+                        {t('common.cancel')}
+                      </Button>
+                      <Button type="submit" disabled={isSettling}>
+                        {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>
+        }
+      />
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>{t('documentData.title')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.client')}
+                </dt>
+                <dd className="mt-1">
+                  <Link
+                    href={`/cadastros/pessoas/${cliente?.id}`}
+                    className="hover:underline"
+                  >
+                    {cliente?.nome}
+                  </Link>
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.cnpjCpf')}
+                </dt>
+                <dd className="mt-1">{cliente?.documento}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.competency')}
+                </dt>
+                <dd className="mt-1">{titulo.competencia}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.totalValue')}
+                </dt>
+                <dd className="mt-1 text-lg font-semibold">
+                  <Money value={titulo.valorTotal} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.category')}
+                </dt>
+                <dd className="mt-1">{categoria?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.costCenter')}
+                </dt>
+                <dd className="mt-1">{centroCusto?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.channel')}
+                </dt>
+                <dd className="mt-1">
+                  <Badge className={canal.className} variant="outline">
+                    {canal.label}
+                  </Badge>
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.tags')}
+                </dt>
+                <dd className="mt-1">
+                  <TagSelectorSheet
+                    selectedTagIds={selectedTagIds}
+                    tags={tagOptions}
+                    onChange={handleChangeTags}
+                    onCreateTag={handleCreateTag}
+                    disabled={isCreatingTag}
+                    emptyText={t('tagSelector.noTags')}
+                    labels={{
+                      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('tagSelector.removeTagAria', { tag: tagName }),
+                    }}
+                  />
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('attachments.title')}</CardTitle>
+            <CardDescription>{t('attachments.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {attachmentDetails.length > 0 ? (
+              <ul className="space-y-2">
+                {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?.nome}
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('attachments.none')}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="parcelas">
+        <TabsList>
+          <TabsTrigger value="parcelas">{t('tabs.installments')}</TabsTrigger>
+          <TabsTrigger value="liquidacoes">{t('tabs.receipts')}</TabsTrigger>
+          <TabsTrigger value="auditoria">{t('tabs.audit')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="parcelas" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('installmentsTable.installment')}</TableHead>
+                    <TableHead>{t('installmentsTable.dueDate')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('installmentsTable.value')}
+                    </TableHead>
+                    <TableHead>{t('installmentsTable.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {titulo.parcelas.map((parcela: any) => (
+                    <TableRow key={parcela.id}>
+                      <TableCell>
+                        {parcela.numero}/{titulo.parcelas.length}
+                      </TableCell>
+                      <TableCell>{formatarData(parcela.vencimento)}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={parcela.valor} />
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={parcela.status} />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="liquidacoes" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {titulo.parcelas.some((p: any) => p.liquidacoes.length > 0) ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('receiptsTable.date')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('receiptsTable.value')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('receiptsTable.interest')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('receiptsTable.discount')}
+                      </TableHead>
+                      <TableHead>{t('receiptsTable.account')}</TableHead>
+                      <TableHead>{t('receiptsTable.method')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('receiptsTable.actions')}
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {titulo.parcelas.flatMap((parcela: any) =>
+                      parcela.liquidacoes.map((liq: any) => {
+                        const conta = getContaBancariaById(liq.contaBancariaId);
+                        return (
+                          <TableRow key={liq.id}>
+                            <TableCell>{formatarData(liq.data)}</TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.valor} />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.juros} />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.desconto} />
+                            </TableCell>
+                            <TableCell>{conta?.descricao}</TableCell>
+                            <TableCell className="capitalize">
+                              {liq.metodo}
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <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>
+                        );
+                      })
+                    )}
+                  </TableBody>
+                </Table>
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('receiptsTable.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="auditoria" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {auditEvents.length > 0 ? (
+                <AuditTimeline events={auditEvents} />
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('audit.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}