@hed-hog/finance 0.0.256 → 0.0.260

package/hedhog/frontend/app/cash-and-banks/bank-reconciliation/page.tsx.ejs

@@ -1,477 +1,825 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
-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 { Progress } from '@/components/ui/progress';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { StatusBadge } from '@/components/ui/status-badge';
-import { Check, DollarSign, Link2, RefreshCw } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { formatarData, formatarMoeda } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-function CriarAjusteDialog({ t }: { t: ReturnType<typeof useTranslations> }) {
-  return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" size="sm">
-          <DollarSign className="mr-2 h-4 w-4" />
-          {t('adjustment.action')}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t('adjustment.title')}</DialogTitle>
-          <DialogDescription>{t('adjustment.description')}</DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="tipo">{t('adjustment.type')}</Label>
-            <Select>
-              <SelectTrigger>
-                <SelectValue placeholder={t('common.select')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="tarifa">
-                  {t('adjustment.types.bankFee')}
-                </SelectItem>
-                <SelectItem value="juros">
-                  {t('adjustment.types.interest')}
-                </SelectItem>
-                <SelectItem value="diferenca">
-                  {t('adjustment.types.valueDifference')}
-                </SelectItem>
-                <SelectItem value="outro">
-                  {t('adjustment.types.other')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="valor">{t('adjustment.value')}</Label>
-            <InputMoney id="valor" placeholder="0,00" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="descricao">{t('adjustment.details')}</Label>
-            <Input
-              id="descricao"
-              placeholder={t('adjustment.detailsPlaceholder')}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="button" variant="outline">
-            {t('common.cancel')}
-          </Button>
-          <Button type="button">{t('adjustment.submit')}</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default function ConciliacaoPage() {
-  const t = useTranslations('finance.BankReconciliationPage');
-  const pathname = usePathname();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const bankAccountIdFromUrl = searchParams.get('bank_account_id');
-  const { data } = useFinanceData();
-  const { extratos, titulosPagar, titulosReceber, contasBancarias, pessoas } =
-    data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-
-  const extratosPendentes = extratos.filter(
-    (e) => e.statusConciliacao === 'pendente'
-  );
-
-  const titulosAbertos = [
-    ...titulosPagar.flatMap((t: any) =>
-      t.parcelas
-        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
-        .map((p: any) => ({
-          id: `pagar-${t.id}-${p.id}`,
-          tipo: 'pagar' as const,
-          documento: t.documento,
-          pessoa: getPessoaById(t.fornecedorId)?.nome || '',
-          vencimento: p.vencimento,
-          valor: p.valor,
-        }))
-    ),
-    ...titulosReceber.flatMap((t: any) =>
-      t.parcelas
-        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
-        .map((p: any) => ({
-          id: `receber-${t.id}-${p.id}`,
-          tipo: 'receber' as const,
-          documento: t.documento,
-          pessoa: getPessoaById(t.clienteId)?.nome || '',
-          vencimento: p.vencimento,
-          valor: p.valor,
-        }))
-    ),
-  ];
-
-  const [contaFilter, setContaFilter] = useState<string>('');
-  const [selectedExtrato, setSelectedExtrato] = useState<string | null>(null);
-  const [selectedTitulo, setSelectedTitulo] = useState<string | null>(null);
-
-  useEffect(() => {
-    const firstAccount = contasBancarias[0];
-
-    if (!firstAccount) {
-      return;
-    }
-
-    const hasAccountFromUrl =
-      !!bankAccountIdFromUrl &&
-      contasBancarias.some((account) => account.id === bankAccountIdFromUrl);
-
-    const nextAccountId = hasAccountFromUrl
-      ? (bankAccountIdFromUrl as string)
-      : firstAccount.id;
-
-    if (contaFilter !== nextAccountId) {
-      setContaFilter(nextAccountId);
-    }
-
-    if (bankAccountIdFromUrl !== nextAccountId) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set('bank_account_id', nextAccountId);
-      router.replace(`${pathname}?${params.toString()}`);
-    }
-  }, [
-    bankAccountIdFromUrl,
-    contaFilter,
-    contasBancarias,
-    pathname,
-    router,
-    searchParams,
-  ]);
-
-  const extratosFiltered = extratosPendentes.filter(
-    (e) => e.contaBancariaId === contaFilter
-  );
-
-  const totalConciliado = extratos.filter(
-    (e) =>
-      e.contaBancariaId === contaFilter && e.statusConciliacao === 'conciliado'
-  ).length;
-  const totalExtratoConta = extratos.filter(
-    (e) => e.contaBancariaId === contaFilter
-  ).length;
-  const percentualConciliado =
-    totalExtratoConta > 0
-      ? Math.round((totalConciliado / totalExtratoConta) * 100)
-      : 0;
-
-  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="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <Select
-          value={contaFilter}
-          onValueChange={(value) => {
-            setContaFilter(value);
-
-            const params = new URLSearchParams(searchParams.toString());
-            params.set('bank_account_id', value);
-            router.replace(`${pathname}?${params.toString()}`);
-          }}
-        >
-          <SelectTrigger className="w-full sm:w-[280px]">
-            <SelectValue placeholder={t('filters.selectAccount')} />
-          </SelectTrigger>
-          <SelectContent>
-            {contasBancarias.map((conta) => (
-              <SelectItem key={conta.id} value={conta.id}>
-                {conta.banco} - {conta.descricao}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="flex gap-2">
-          <CriarAjusteDialog t={t} />
-          <Button disabled={!selectedExtrato || !selectedTitulo}>
-            <Link2 className="mr-2 h-4 w-4" />
-            {t('actions.reconcileSelected')}
-          </Button>
-        </div>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-4">
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.reconciled')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{percentualConciliado}%</div>
-            <Progress value={percentualConciliado} className="mt-2" />
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.pending')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{extratosFiltered.length}</div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.transactions')}
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.discrepancies')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold text-orange-600">0</div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.toResolve')}
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium">
-              {t('cards.difference')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={2230.5} />
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {t('cards.notReconciled')}
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <RefreshCw className="h-4 w-4" />
-              {t('statement.title')}
-            </CardTitle>
-            <CardDescription>{t('statement.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              {extratosFiltered.length > 0 ? (
-                extratosFiltered.map((extrato) => (
-                  <div
-                    key={extrato.id}
-                    className={`flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors ${
-                      selectedExtrato === extrato.id
-                        ? 'border-primary bg-primary/5'
-                        : 'hover:bg-muted/50'
-                    }`}
-                    onClick={() =>
-                      setSelectedExtrato(
-                        selectedExtrato === extrato.id ? null : extrato.id
-                      )
-                    }
-                  >
-                    <Checkbox
-                      checked={selectedExtrato === extrato.id}
-                      onCheckedChange={() =>
-                        setSelectedExtrato(
-                          selectedExtrato === extrato.id ? null : extrato.id
-                        )
-                      }
-                    />
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between">
-                        <span className="text-sm font-medium">
-                          {extrato.descricao}
-                        </span>
-                        <span
-                          className={`font-semibold ${
-                            extrato.tipo === 'entrada'
-                              ? 'text-green-600'
-                              : 'text-red-600'
-                          }`}
-                        >
-                          {extrato.tipo === 'saida' && '-'}
-                          {formatarMoeda(extrato.valor)}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                        <span>{formatarData(extrato.data)}</span>
-                        <StatusBadge
-                          status={extrato.statusConciliacao}
-                          type="conciliacao"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ))
-              ) : (
-                <div className="flex flex-col items-center justify-center py-8 text-center">
-                  <Check className="h-12 w-12 text-green-500" />
-                  <p className="mt-2 font-medium">
-                    {t('statement.emptyTitle')}
-                  </p>
-                  <p className="text-sm text-muted-foreground">
-                    {t('statement.emptyDescription')}
-                  </p>
-                </div>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <DollarSign className="h-4 w-4" />
-              {t('openTitles.title')}
-            </CardTitle>
-            <CardDescription>{t('openTitles.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2 max-h-[400px] overflow-y-auto">
-              {titulosAbertos.map((titulo) => (
-                <div
-                  key={titulo.id}
-                  className={`flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors ${
-                    selectedTitulo === titulo.id
-                      ? 'border-primary bg-primary/5'
-                      : 'hover:bg-muted/50'
-                  }`}
-                  onClick={() =>
-                    setSelectedTitulo(
-                      selectedTitulo === titulo.id ? null : titulo.id
-                    )
-                  }
-                >
-                  <Checkbox
-                    checked={selectedTitulo === titulo.id}
-                    onCheckedChange={() =>
-                      setSelectedTitulo(
-                        selectedTitulo === titulo.id ? null : titulo.id
-                      )
-                    }
-                  />
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium">
-                          {titulo.documento}
-                        </span>
-                        <Badge
-                          variant="outline"
-                          className={
-                            titulo.tipo === 'pagar'
-                              ? 'border-red-200 text-red-700'
-                              : 'border-green-200 text-green-700'
-                          }
-                        >
-                          {titulo.tipo === 'pagar'
-                            ? t('openTitles.pay')
-                            : t('openTitles.receive')}
-                        </Badge>
-                      </div>
-                      <span className="font-semibold">
-                        {formatarMoeda(titulo.valor)}
-                      </span>
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {t('openTitles.personDue', {
-                        person: titulo.pessoa,
-                        dueDate: formatarData(titulo.vencimento),
-                      })}
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {selectedExtrato && selectedTitulo && (
-        <Card className="border-primary">
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2 text-primary">
-              <Link2 className="h-4 w-4" />
-              {t('ready.title')}
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-muted-foreground">
-                  {t('ready.description')}
-                </p>
-              </div>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setSelectedExtrato(null);
-                    setSelectedTitulo(null);
-                  }}
-                >
-                  {t('common.cancel')}
-                </Button>
-                <Button>
-                  <Check className="mr-2 h-4 w-4" />
-                  {t('actions.reconcile')}
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+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 { Progress } from '@/components/ui/progress';
+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 { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Check, DollarSign, Link2, RefreshCw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { formatarData, formatarMoeda } from '../../_lib/formatters';
+
+type BankAccount = {
+  id: string;
+  banco: string;
+  descricao: string;
+};
+
+type Statement = {
+  id: string;
+  contaBancariaId: string;
+  data: string;
+  descricao: string;
+  valor: number;
+  tipo: 'entrada' | 'saida';
+  statusConciliacao:
+    | 'importado'
+    | 'pendente'
+    | 'conciliado'
+    | 'estornado'
+    | 'ajustado';
+};
+
+type Installment = {
+  id: string;
+  vencimento: string;
+  valor: number;
+  status: string;
+};
+
+type FinancialTitle = {
+  id: string;
+  documento: string;
+  fornecedor?: string;
+  cliente?: string;
+  parcelas: Installment[];
+};
+
+type PaginatedResponse<T> = {
+  data: T[];
+};
+
+type OpenTitleItem = {
+  id: string;
+  tipo: 'pagar' | 'receber';
+  titleId: string;
+  installmentId: string;
+  documento: string;
+  pessoa: string;
+  vencimento: string;
+  valor: number;
+};
+
+type BankReconciliationSummary = {
+  discrepancies: number;
+  difference: number;
+};
+
+const ajusteSchema = z.object({
+  type: z.string().trim().min(1),
+  value: z.number().min(0.01),
+  description: z.string().optional(),
+});
+
+type AjusteFormValues = z.infer<typeof ajusteSchema>;
+
+function CriarAjusteSheet({
+  t,
+  contaFilter,
+  onCreated,
+}: {
+  t: ReturnType<typeof useTranslations>;
+  contaFilter: string;
+  onCreated: () => Promise<void> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<AjusteFormValues>({
+    resolver: zodResolver(ajusteSchema),
+    defaultValues: {
+      type: '',
+      value: 0,
+      description: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      type: '',
+      value: 0,
+      description: '',
+    });
+  }, [form, open]);
+
+  const handleSubmit = async (values: AjusteFormValues) => {
+    if (!contaFilter) {
+      showToastHandler?.('error', 'Selecione uma conta bancária');
+      return;
+    }
+
+    try {
+      await request({
+        url: '/finance/statements/adjustments',
+        method: 'POST',
+        data: {
+          bank_account_id: Number(contaFilter),
+          amount: values.value,
+          type: values.type,
+          description: values.description?.trim() || undefined,
+        },
+      });
+
+      await onCreated();
+      showToastHandler?.('success', 'Ajuste criado com sucesso');
+      setOpen(false);
+    } catch {
+      showToastHandler?.('error', 'Não foi possível criar o ajuste');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <DollarSign className="mr-2 h-4 w-4" />
+        {t('adjustment.action')}
+      </Button>
+
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('adjustment.title')}</SheetTitle>
+          <SheetDescription>{t('adjustment.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="type"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('adjustment.type')}</FormLabel>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('common.select')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="tarifa">
+                        {t('adjustment.types.bankFee')}
+                      </SelectItem>
+                      <SelectItem value="juros">
+                        {t('adjustment.types.interest')}
+                      </SelectItem>
+                      <SelectItem value="diferenca">
+                        {t('adjustment.types.valueDifference')}
+                      </SelectItem>
+                      <SelectItem value="outro">
+                        {t('adjustment.types.other')}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="value"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('adjustment.value')}</FormLabel>
+                  <FormControl>
+                    <InputMoney
+                      ref={field.ref}
+                      name={field.name}
+                      value={field.value}
+                      onBlur={field.onBlur}
+                      onValueChange={(value) => field.onChange(value ?? 0)}
+                      placeholder="0,00"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('adjustment.details')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('adjustment.detailsPlaceholder')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('adjustment.submit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function ConciliacaoPage() {
+  const t = useTranslations('finance.BankReconciliationPage');
+  const { request, showToastHandler } = useApp();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const bankAccountIdFromUrl = searchParams.get('bank_account_id');
+
+  const [contaFilter, setContaFilter] = useState<string>('');
+  const [selectedExtrato, setSelectedExtrato] = useState<string | null>(null);
+  const [selectedTitulo, setSelectedTitulo] = useState<string | null>(null);
+
+  const { data: contasBancarias = [] } = useQuery<BankAccount[]>({
+    queryKey: ['finance-bank-accounts'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/bank-accounts',
+        method: 'GET',
+      });
+
+      return (response?.data || []) as BankAccount[];
+    },
+  });
+
+  useEffect(() => {
+    const firstAccount = contasBancarias[0];
+
+    if (!firstAccount) {
+      return;
+    }
+
+    const hasAccountFromUrl =
+      !!bankAccountIdFromUrl &&
+      contasBancarias.some((account) => account.id === bankAccountIdFromUrl);
+
+    const nextAccountId = hasAccountFromUrl
+      ? (bankAccountIdFromUrl as string)
+      : firstAccount.id;
+
+    if (contaFilter !== nextAccountId) {
+      setContaFilter(nextAccountId);
+    }
+
+    if (bankAccountIdFromUrl !== nextAccountId) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set('bank_account_id', nextAccountId);
+      router.replace(`${pathname}?${params.toString()}`);
+    }
+  }, [
+    bankAccountIdFromUrl,
+    contaFilter,
+    contasBancarias,
+    pathname,
+    router,
+    searchParams,
+  ]);
+
+  const { data: extratos = [], refetch: refetchExtratos } = useQuery<
+    Statement[]
+  >({
+    queryKey: ['finance-statements', contaFilter],
+    queryFn: async () => {
+      if (!contaFilter) {
+        return [];
+      }
+
+      const response = await request({
+        url: `/finance/statements?bank_account_id=${contaFilter}`,
+        method: 'GET',
+      });
+
+      return (response?.data || []) as Statement[];
+    },
+  });
+
+  const { data: reconciliationSummary } = useQuery<BankReconciliationSummary>({
+    queryKey: ['finance-bank-reconciliation-summary', contaFilter],
+    queryFn: async () => {
+      if (!contaFilter) {
+        return {
+          discrepancies: 0,
+          difference: 0,
+        };
+      }
+
+      const response = await request<BankReconciliationSummary>({
+        url: `/finance/bank-reconciliation/summary?bank_account_id=${contaFilter}`,
+        method: 'GET',
+      });
+
+      return (
+        (response?.data as BankReconciliationSummary) || {
+          discrepancies: 0,
+          difference: 0,
+        }
+      );
+    },
+  });
+
+  const { data: titulosPagar = [], refetch: refetchTitulosPagar } = useQuery<
+    FinancialTitle[]
+  >({
+    queryKey: ['finance-payable-titles-open'],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<FinancialTitle>>({
+        url: '/finance/accounts-payable/installments?page=1&pageSize=200',
+        method: 'GET',
+      });
+
+      const payload = response?.data as PaginatedResponse<FinancialTitle>;
+      return Array.isArray(payload?.data) ? payload.data : [];
+    },
+  });
+
+  const { data: titulosReceber = [], refetch: refetchTitulosReceber } =
+    useQuery<FinancialTitle[]>({
+      queryKey: ['finance-receivable-titles-open'],
+      queryFn: async () => {
+        const response = await request<PaginatedResponse<FinancialTitle>>({
+          url: '/finance/accounts-receivable/installments?page=1&pageSize=200',
+          method: 'GET',
+        });
+
+        const payload = response?.data as PaginatedResponse<FinancialTitle>;
+        return Array.isArray(payload?.data) ? payload.data : [];
+      },
+    });
+
+  const extratosPendentes = extratos.filter(
+    (e) =>
+      e.statusConciliacao === 'pendente' || e.statusConciliacao === 'importado'
+  );
+
+  const extratosFiltered = extratosPendentes.filter(
+    (e) => e.contaBancariaId === contaFilter
+  );
+
+  const titulosAbertos = useMemo<OpenTitleItem[]>(() => {
+    const payables: OpenTitleItem[] = titulosPagar.flatMap((titulo) =>
+      (titulo.parcelas || [])
+        .filter(
+          (parcela) =>
+            parcela.status === 'aberto' || parcela.status === 'vencido'
+        )
+        .map((parcela) => ({
+          id: `pagar-${titulo.id}-${parcela.id}`,
+          tipo: 'pagar' as const,
+          titleId: titulo.id,
+          installmentId: parcela.id,
+          documento: titulo.documento,
+          pessoa: titulo.fornecedor || '',
+          vencimento: parcela.vencimento,
+          valor: parcela.valor,
+        }))
+    );
+
+    const receivables: OpenTitleItem[] = titulosReceber.flatMap((titulo) =>
+      (titulo.parcelas || [])
+        .filter(
+          (parcela) =>
+            parcela.status === 'aberto' || parcela.status === 'vencido'
+        )
+        .map((parcela) => ({
+          id: `receber-${titulo.id}-${parcela.id}`,
+          tipo: 'receber' as const,
+          titleId: titulo.id,
+          installmentId: parcela.id,
+          documento: titulo.documento,
+          pessoa: titulo.cliente || '',
+          vencimento: parcela.vencimento,
+          valor: parcela.valor,
+        }))
+    );
+
+    return [...payables, ...receivables];
+  }, [titulosPagar, titulosReceber]);
+
+  const selectedExtratoItem = extratosFiltered.find(
+    (extrato) => extrato.id === selectedExtrato
+  );
+  const selectedTituloItem = titulosAbertos.find(
+    (titulo) => titulo.id === selectedTitulo
+  );
+
+  const titulosCompativeis = useMemo(() => {
+    if (!selectedExtratoItem) {
+      return titulosAbertos;
+    }
+
+    return titulosAbertos.filter((titulo) =>
+      selectedExtratoItem.tipo === 'saida'
+        ? titulo.tipo === 'pagar'
+        : titulo.tipo === 'receber'
+    );
+  }, [selectedExtratoItem, titulosAbertos]);
+
+  const totalConciliado = extratos.filter(
+    (e) =>
+      e.contaBancariaId === contaFilter && e.statusConciliacao === 'conciliado'
+  ).length;
+  const totalExtratoConta = extratos.filter(
+    (e) => e.contaBancariaId === contaFilter
+  ).length;
+  const percentualConciliado =
+    totalExtratoConta > 0
+      ? Math.round((totalConciliado / totalExtratoConta) * 100)
+      : 0;
+
+  const handleRefreshData = async () => {
+    await Promise.all([
+      refetchExtratos(),
+      refetchTitulosPagar(),
+      refetchTitulosReceber(),
+    ]);
+  };
+
+  const handleReconcile = async () => {
+    if (!selectedExtratoItem || !selectedTituloItem || !contaFilter) {
+      return;
+    }
+
+    const endpointBase =
+      selectedTituloItem.tipo === 'pagar'
+        ? '/finance/accounts-payable/installments'
+        : '/finance/accounts-receivable/installments';
+
+    try {
+      await request({
+        url: `${endpointBase}/${selectedTituloItem.titleId}/settlements`,
+        method: 'POST',
+        data: {
+          installment_id: Number(selectedTituloItem.installmentId),
+          amount: Math.abs(selectedExtratoItem.valor),
+          settled_at: selectedExtratoItem.data,
+          bank_account_id: Number(contaFilter),
+          payment_channel: 'transferencia',
+          description: selectedExtratoItem.descricao,
+          bank_statement_line_id: Number(selectedExtratoItem.id),
+        },
+      });
+
+      setSelectedExtrato(null);
+      setSelectedTitulo(null);
+      await handleRefreshData();
+      showToastHandler?.('success', 'Conciliação realizada com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível conciliar os registros');
+    }
+  };
+
+  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="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Select
+          value={contaFilter}
+          onValueChange={(value) => {
+            setContaFilter(value);
+            setSelectedExtrato(null);
+            setSelectedTitulo(null);
+
+            const params = new URLSearchParams(searchParams.toString());
+            params.set('bank_account_id', value);
+            router.replace(`${pathname}?${params.toString()}`);
+          }}
+        >
+          <SelectTrigger className="w-full sm:w-[280px]">
+            <SelectValue placeholder={t('filters.selectAccount')} />
+          </SelectTrigger>
+          <SelectContent>
+            {contasBancarias.map((conta) => (
+              <SelectItem key={conta.id} value={conta.id}>
+                {conta.banco} - {conta.descricao}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <div className="flex gap-2">
+          <CriarAjusteSheet
+            t={t}
+            contaFilter={contaFilter}
+            onCreated={handleRefreshData}
+          />
+          <Button
+            disabled={!selectedExtratoItem || !selectedTituloItem}
+            onClick={() => void handleReconcile()}
+          >
+            <Link2 className="mr-2 h-4 w-4" />
+            {t('actions.reconcileSelected')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.reconciled')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{percentualConciliado}%</div>
+            <Progress value={percentualConciliado} className="mt-2" />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.pending')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{extratosFiltered.length}</div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.transactions')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.discrepancies')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-orange-600">
+              {reconciliationSummary?.discrepancies || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.toResolve')}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.difference')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={reconciliationSummary?.difference || 0} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.notReconciled')}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <RefreshCw className="h-4 w-4" />
+              {t('statement.title')}
+            </CardTitle>
+            <CardDescription>{t('statement.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {extratosFiltered.length > 0 ? (
+                extratosFiltered.map((extrato) => (
+                  <div
+                    key={extrato.id}
+                    className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
+                      selectedExtrato === extrato.id
+                        ? 'border-primary bg-primary/5'
+                        : 'hover:bg-muted/50'
+                    }`}
+                    onClick={() =>
+                      setSelectedExtrato(
+                        selectedExtrato === extrato.id ? null : extrato.id
+                      )
+                    }
+                  >
+                    <Checkbox
+                      checked={selectedExtrato === extrato.id}
+                      onCheckedChange={() =>
+                        setSelectedExtrato(
+                          selectedExtrato === extrato.id ? null : extrato.id
+                        )
+                      }
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium">
+                          {extrato.descricao}
+                        </span>
+                        <span
+                          className={`font-semibold ${
+                            extrato.tipo === 'entrada'
+                              ? 'text-green-600'
+                              : 'text-red-600'
+                          }`}
+                        >
+                          {extrato.tipo === 'saida' && '-'}
+                          {formatarMoeda(Math.abs(extrato.valor))}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span>{formatarData(extrato.data)}</span>
+                        <StatusBadge
+                          status={extrato.statusConciliacao}
+                          type="conciliacao"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-center">
+                  <Check className="h-12 w-12 text-green-500" />
+                  <p className="mt-2 font-medium">
+                    {t('statement.emptyTitle')}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {t('statement.emptyDescription')}
+                  </p>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <DollarSign className="h-4 w-4" />
+              {t('openTitles.title')}
+            </CardTitle>
+            <CardDescription>{t('openTitles.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="max-h-[400px] space-y-2 overflow-y-auto">
+              {titulosCompativeis.map((titulo) => (
+                <div
+                  key={titulo.id}
+                  className={`flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors ${
+                    selectedTitulo === titulo.id
+                      ? 'border-primary bg-primary/5'
+                      : 'hover:bg-muted/50'
+                  }`}
+                  onClick={() =>
+                    setSelectedTitulo(
+                      selectedTitulo === titulo.id ? null : titulo.id
+                    )
+                  }
+                >
+                  <Checkbox
+                    checked={selectedTitulo === titulo.id}
+                    onCheckedChange={() =>
+                      setSelectedTitulo(
+                        selectedTitulo === titulo.id ? null : titulo.id
+                      )
+                    }
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">
+                          {titulo.documento}
+                        </span>
+                        <Badge
+                          variant="outline"
+                          className={
+                            titulo.tipo === 'pagar'
+                              ? 'border-red-200 text-red-700'
+                              : 'border-green-200 text-green-700'
+                          }
+                        >
+                          {titulo.tipo === 'pagar'
+                            ? t('openTitles.pay')
+                            : t('openTitles.receive')}
+                        </Badge>
+                      </div>
+                      <span className="font-semibold">
+                        {formatarMoeda(titulo.valor)}
+                      </span>
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {t('openTitles.personDue', {
+                        person: titulo.pessoa,
+                        dueDate: formatarData(titulo.vencimento),
+                      })}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {selectedExtratoItem && selectedTituloItem && (
+        <Card className="border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-primary">
+              <Link2 className="h-4 w-4" />
+              {t('ready.title')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">
+                  {t('ready.description')}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setSelectedExtrato(null);
+                    setSelectedTitulo(null);
+                  }}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button onClick={() => void handleReconcile()}>
+                  <Check className="mr-2 h-4 w-4" />
+                  {t('actions.reconcile')}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </Page>
+  );
+}