@hed-hog/finance 0.0.256 → 0.0.260

package/hedhog/frontend/app/accounts-receivable/collections-default/page.tsx.ejs

@@ -1,440 +1,643 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-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 {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Textarea } from '@/components/ui/textarea';
-import { AlertTriangle, FileText, Send } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { formatarMoeda } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-function HistoricoContatosSheet({
-  cliente,
-  historicoContatos,
-  t,
-}: {
-  cliente: string;
-  historicoContatos: any[];
-  t: ReturnType<typeof useTranslations>;
-}) {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant="outline" size="sm">
-          <FileText className="mr-2 h-4 w-4" />
-          {t('actions.history')}
-        </Button>
-      </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>{t('history.title')}</SheetTitle>
-          <SheetDescription>{cliente}</SheetDescription>
-        </SheetHeader>
-        <div className="mt-6 space-y-4">
-          {historicoContatos.map((contato, i) => (
-            <div key={i} className="rounded-lg border p-4">
-              <div className="flex items-center justify-between">
-                <span className="font-medium">{contato.tipo}</span>
-                <span className="text-sm text-muted-foreground">
-                  {contato.data}
-                </span>
-              </div>
-              <p className="mt-2 text-sm">{contato.descricao}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {t('history.by')} {contato.responsavel}
-              </p>
-            </div>
-          ))}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
-
-function EnviarCobrancaDialog({
-  cliente,
-  t,
-}: {
-  cliente: string;
-  t: ReturnType<typeof useTranslations>;
-}) {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button size="sm">
-          <Send className="mr-2 h-4 w-4" />
-          {t('actions.collect')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('send.title')}</DialogTitle>
-          <DialogDescription>
-            {t('send.description', { cliente })}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label>{t('send.contactType')}</Label>
-            <div className="flex gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                className="flex-1 bg-transparent"
-              >
-                {t('send.channels.email')}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                className="flex-1 bg-transparent"
-              >
-                WhatsApp
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                className="flex-1 bg-transparent"
-              >
-                SMS
-              </Button>
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="mensagem">{t('send.message')}</Label>
-            <Textarea
-              id="mensagem"
-              placeholder={t('send.messagePlaceholder')}
-              defaultValue={t('send.defaultMessage')}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="button" variant="outline">
-            {t('common.cancel')}
-          </Button>
-          <Button type="button">{t('send.submit')}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function RegistrarAcordoDialog({
-  cliente,
-  t,
-}: {
-  cliente: string;
-  t: ReturnType<typeof useTranslations>;
-}) {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          {t('actions.registerAgreement')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('agreement.title')}</DialogTitle>
-          <DialogDescription>
-            {t('agreement.description', { cliente })}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="valorAcordo">{t('agreement.value')}</Label>
-              <InputMoney id="valorAcordo" placeholder="0,00" />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="parcelas">{t('agreement.installments')}</Label>
-              <Input id="parcelas" type="number" placeholder="1" />
-            </div>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="dataVencimento">
-              {t('agreement.firstDueDate')}
-            </Label>
-            <Input id="dataVencimento" type="date" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="observacoes">{t('agreement.notes')}</Label>
-            <Textarea
-              id="observacoes"
-              placeholder={t('agreement.notesPlaceholder')}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="button" variant="outline">
-            {t('common.cancel')}
-          </Button>
-          <Button type="button">{t('agreement.submit')}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default function CobrancaPage() {
-  const t = useTranslations('finance.CollectionsDefaultPage');
-  const { data } = useFinanceData();
-  const { agingInadimplencia, historicoContatos } = data;
-
-  const chartData = [
-    {
-      name: t('chart.range0to30'),
-      valor: agingInadimplencia.reduce(
-        (acc, c) => acc + (c.bucket0_30 || 0),
-        0
-      ),
-      fill: 'hsl(var(--chart-2))',
-    },
-    {
-      name: t('chart.range31to60'),
-      valor: agingInadimplencia.reduce(
-        (acc, c) => acc + (c.bucket31_60 || 0),
-        0
-      ),
-      fill: 'hsl(var(--chart-4))',
-    },
-    {
-      name: t('chart.range61to90'),
-      valor: agingInadimplencia.reduce(
-        (acc, c) => acc + (c.bucket61_90 || 0),
-        0
-      ),
-      fill: 'hsl(var(--chart-5))',
-    },
-    {
-      name: t('chart.range90plus'),
-      valor: agingInadimplencia.reduce(
-        (acc, c) => acc + (c.bucket90plus || 0),
-        0
-      ),
-      fill: 'hsl(var(--destructive))',
-    },
-  ];
-
-  const totalInadimplencia = agingInadimplencia.reduce(
-    (acc, c) => acc + c.total,
-    0
-  );
-  const totalClientes = agingInadimplencia.length;
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance'), href: '/finance' },
-          { label: t('breadcrumbs.current') },
-        ]}
-      />
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.totalDefault')}
-            </CardTitle>
-            <AlertTriangle className="h-4 w-4 text-destructive" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={totalInadimplencia} />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.lateClients')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{totalClientes}</div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.maxDelay')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-destructive">
-              {t('cards.maxDelayValue')}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('aging.title')}</CardTitle>
-          <CardDescription>{t('aging.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ResponsiveContainer width="100%" height={250}>
-            <BarChart data={chartData}>
-              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
-              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
-              <YAxis
-                tick={{ fontSize: 12 }}
-                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
-              />
-              <Tooltip
-                formatter={(value: number) => formatarMoeda(value)}
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
-              <Bar dataKey="valor" radius={[4, 4, 0, 0]}>
-                {chartData.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={entry.fill} />
-                ))}
-              </Bar>
-            </BarChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{t('table.headers.client')}</TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.range0to30')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.range31to60')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.range61to90')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.range90plus')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.total')}
-                </TableHead>
-                <TableHead className="text-right">
-                  {t('table.headers.actions')}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {agingInadimplencia.map((item) => (
-                <TableRow key={item.clienteId}>
-                  <TableCell className="font-medium">{item.cliente}</TableCell>
-                  <TableCell className="text-right">
-                    {item.bucket0_30 > 0 ? (
-                      <Money value={item.bucket0_30} />
-                    ) : (
-                      '-'
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {item.bucket31_60 > 0 ? (
-                      <Money value={item.bucket31_60} />
-                    ) : (
-                      '-'
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {item.bucket61_90 > 0 ? (
-                      <Money value={item.bucket61_90} />
-                    ) : (
-                      '-'
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right">
-                    {item.bucket90plus > 0 ? (
-                      <span className="text-destructive font-medium">
-                        <Money value={item.bucket90plus} />
-                      </span>
-                    ) : (
-                      '-'
-                    )}
-                  </TableCell>
-                  <TableCell className="text-right font-semibold">
-                    <Money value={item.total} />
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-2">
-                      <HistoricoContatosSheet
-                        cliente={item.cliente}
-                        historicoContatos={historicoContatos}
-                        t={t}
-                      />
-                      <EnviarCobrancaDialog cliente={item.cliente} t={t} />
-                      <RegistrarAcordoDialog cliente={item.cliente} t={t} />
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { RichTextEditor } from '@/components/rich-text-editor';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+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 {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AlertTriangle, FileText, Send } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { z } from 'zod';
+import { formatarMoeda } from '../../_lib/formatters';
+
+type AgingItem = {
+  clienteId: string;
+  cliente: string;
+  bucket0_30: number;
+  bucket31_60: number;
+  bucket61_90: number;
+  bucket90plus: number;
+  total: number;
+};
+
+type HistoricoContato = {
+  clienteId: string;
+  tipo: string;
+  data: string;
+  descricao: string;
+  responsavel: string;
+};
+
+type CollectionsDefaultData = {
+  agingInadimplencia: AgingItem[];
+  historicoContatos: HistoricoContato[];
+};
+
+const EMPTY_DATA: CollectionsDefaultData = {
+  agingInadimplencia: [],
+  historicoContatos: [],
+};
+
+const sendCollectionSchema = z.object({
+  message: z.string().min(5),
+});
+
+const registerAgreementSchema = z.object({
+  amount: z.number().min(0.01),
+  installments: z.coerce.number().int().min(1).max(120),
+  first_due_date: z.string().min(1),
+  notes: z.string().optional(),
+});
+
+function HistoricoContatosSheet({
+  cliente,
+  historicoContatos,
+  t,
+}: {
+  cliente: string;
+  historicoContatos: HistoricoContato[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm">
+          <FileText className="mr-2 h-4 w-4" />
+          {t('actions.history')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>{t('history.title')}</SheetTitle>
+          <SheetDescription>{cliente}</SheetDescription>
+        </SheetHeader>
+        <div className="mt-6 space-y-4 px-4">
+          {historicoContatos.length === 0 ? (
+            <div className="rounded-lg border p-4 text-sm text-muted-foreground">
+              -
+            </div>
+          ) : (
+            historicoContatos.map((contato, i) => (
+              <div
+                key={`${contato.data}-${i}`}
+                className="rounded-lg border p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-medium">{contato.tipo}</span>
+                  <span className="text-sm text-muted-foreground">
+                    {new Date(contato.data).toLocaleString()}
+                  </span>
+                </div>
+                <p className="mt-2 text-sm">{contato.descricao}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t('history.by')} {contato.responsavel}
+                </p>
+              </div>
+            ))
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function EnviarCobrancaDialog({
+  cliente,
+  clienteId,
+  onSuccess,
+  t,
+}: {
+  cliente: string;
+  clienteId: string;
+  onSuccess: () => Promise<unknown>;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof sendCollectionSchema>>({
+    resolver: zodResolver(sendCollectionSchema),
+    defaultValues: {
+      message: t('send.defaultMessage'),
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof sendCollectionSchema>) => {
+    try {
+      await request({
+        url: `/finance/accounts-receivable/collections-default/${clienteId}/send`,
+        method: 'POST',
+        data: {
+          message: values.message,
+        },
+      });
+
+      await onSuccess();
+      showToastHandler?.('success', t('send.submit'));
+      setOpen(false);
+      form.reset({
+        message: t('send.defaultMessage'),
+      });
+    } catch {
+      showToastHandler?.('error', t('send.submit'));
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button size="sm">
+          <Send className="mr-2 h-4 w-4" />
+          {t('actions.collect')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-[90vw] sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>{t('send.title')}</SheetTitle>
+          <SheetDescription>
+            {t('send.description', { cliente })}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="message"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel>{t('send.message')}</FormLabel>
+                  <FormControl>
+                    <RichTextEditor
+                      className="w-full max-w-full min-w-0 overflow-hidden [&_.ProseMirror]:max-w-full [&_.ProseMirror]:mx-0"
+                      value={field.value ?? ''}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-2">
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {t('send.submit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function RegistrarAcordoDialog({
+  cliente,
+  clienteId,
+  onSuccess,
+  t,
+}: {
+  cliente: string;
+  clienteId: string;
+  onSuccess: () => Promise<unknown>;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof registerAgreementSchema>>({
+    resolver: zodResolver(registerAgreementSchema),
+    defaultValues: {
+      amount: 0,
+      installments: 1,
+      first_due_date: '',
+      notes: '',
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof registerAgreementSchema>) => {
+    try {
+      await request({
+        url: `/finance/accounts-receivable/collections-default/${clienteId}/agreements`,
+        method: 'POST',
+        data: values,
+      });
+
+      await onSuccess();
+      showToastHandler?.('success', t('agreement.submit'));
+      setOpen(false);
+      form.reset({
+        amount: 0,
+        installments: 1,
+        first_due_date: '',
+        notes: '',
+      });
+    } catch {
+      showToastHandler?.('error', t('agreement.submit'));
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="sm">
+          {t('actions.registerAgreement')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-[90vw] sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>{t('agreement.title')}</SheetTitle>
+          <SheetDescription>
+            {t('agreement.description', { cliente })}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="amount"
+                render={({ field }) => (
+                  <FormItem className="space-y-2">
+                    <FormLabel>{t('agreement.value')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        placeholder="0,00"
+                        value={field.value ?? 0}
+                        onValueChange={(value) => field.onChange(value ?? 0)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="installments"
+                render={({ field }) => (
+                  <FormItem className="space-y-2">
+                    <FormLabel>{t('agreement.installments')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        min={1}
+                        max={120}
+                        value={field.value}
+                        onChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="first_due_date"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel>{t('agreement.firstDueDate')}</FormLabel>
+                  <FormControl>
+                    <Input type="date" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="notes"
+              render={({ field }) => (
+                <FormItem className="space-y-2">
+                  <FormLabel>{t('agreement.notes')}</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder={t('agreement.notesPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex flex-col gap-2">
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {t('agreement.submit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function CobrancaPage() {
+  const t = useTranslations('finance.CollectionsDefaultPage');
+  const { request } = useApp();
+
+  const { data = EMPTY_DATA, refetch } = useQuery<CollectionsDefaultData>({
+    queryKey: ['finance-collections-default'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/accounts-receivable/collections-default',
+        method: 'GET',
+      });
+
+      return {
+        ...EMPTY_DATA,
+        ...(response?.data || {}),
+      };
+    },
+    staleTime: 0,
+    refetchOnMount: 'always',
+  });
+
+  const { agingInadimplencia, historicoContatos } = data;
+
+  const chartData = [
+    {
+      name: t('chart.range0to30'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket0_30 || 0),
+        0
+      ),
+    },
+    {
+      name: t('chart.range31to60'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket31_60 || 0),
+        0
+      ),
+    },
+    {
+      name: t('chart.range61to90'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket61_90 || 0),
+        0
+      ),
+    },
+    {
+      name: t('chart.range90plus'),
+      valor: agingInadimplencia.reduce(
+        (acc, c) => acc + (c.bucket90plus || 0),
+        0
+      ),
+    },
+  ];
+
+  const totalInadimplencia = agingInadimplencia.reduce(
+    (acc, c) => acc + c.total,
+    0
+  );
+  const totalClientes = agingInadimplencia.length;
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalDefault')}
+            </CardTitle>
+            <AlertTriangle className="h-4 w-4 text-destructive" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalInadimplencia} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.lateClients')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalClientes}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.maxDelay')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-destructive">
+              {t('cards.maxDelayValue')}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('aging.title')}</CardTitle>
+          <CardDescription>{t('aging.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={250}>
+            <BarChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="name" tick={{ fontSize: 12 }} />
+              <YAxis
+                tick={{ fontSize: 12 }}
+                tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+              />
+              <Tooltip
+                formatter={(value: number) => formatarMoeda(value)}
+                contentStyle={{
+                  backgroundColor: 'var(--background)',
+                  border: '1px solid var(--border)',
+                  borderRadius: '8px',
+                  color: 'var(--foreground)',
+                }}
+                labelStyle={{ color: 'var(--foreground)' }}
+                itemStyle={{ color: 'var(--foreground)' }}
+              />
+              <Bar
+                dataKey="valor"
+                radius={[4, 4, 0, 0]}
+                fill="var(--primary)"
+              />
+            </BarChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.client')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range0to30')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range31to60')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range61to90')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.range90plus')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.total')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.actions')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {agingInadimplencia.map((item) => (
+                <TableRow key={item.clienteId}>
+                  <TableCell className="font-medium">{item.cliente}</TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket0_30 > 0 ? (
+                      <Money value={item.bucket0_30} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket31_60 > 0 ? (
+                      <Money value={item.bucket31_60} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket61_90 > 0 ? (
+                      <Money value={item.bucket61_90} />
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {item.bucket90plus > 0 ? (
+                      <span className="font-medium text-destructive">
+                        <Money value={item.bucket90plus} />
+                      </span>
+                    ) : (
+                      '-'
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right font-semibold">
+                    <Money value={item.total} />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex justify-end gap-2">
+                      <HistoricoContatosSheet
+                        cliente={item.cliente}
+                        historicoContatos={historicoContatos.filter(
+                          (contato) => contato.clienteId === item.clienteId
+                        )}
+                        t={t}
+                      />
+                      <EnviarCobrancaDialog
+                        cliente={item.cliente}
+                        clienteId={item.clienteId}
+                        onSuccess={refetch}
+                        t={t}
+                      />
+                      <RegistrarAcordoDialog
+                        cliente={item.cliente}
+                        clienteId={item.clienteId}
+                        onSuccess={refetch}
+                        t={t}
+                      />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}