@hed-hog/finance 0.0.228 → 0.0.229

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

@@ -551,14 +551,16 @@ export default function ContasBancariasPage() {
                       </span>
                     </div>
                   )}
-                  <div className="flex gap-2 pt-2">
+                  <div className="flex flex-wrap gap-2 pt-2">
                     <Button
                       variant="outline"
                       size="sm"
-                      className="flex-1 bg-transparent"
+                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
                       asChild
                     >
-                      <Link href="/finance/cash-and-banks/statements">
+                      <Link
+                        href={`/finance/cash-and-banks/statements?bank_account_id=${conta.id}`}
+                      >
                         <Eye className="mr-2 h-4 w-4" />
                         {t('accountCard.statement')}
                       </Link>
@@ -566,31 +568,35 @@ export default function ContasBancariasPage() {
                     <Button
                       variant="outline"
                       size="sm"
-                      className="flex-1 bg-transparent"
+                      className="min-w-0 flex-1 basis-[calc(50%-0.25rem)] bg-transparent"
                       asChild
                     >
-                      <Link href="/finance/cash-and-banks/bank-reconciliation">
+                      <Link
+                        href={`/finance/cash-and-banks/bank-reconciliation?bank_account_id=${conta.id}`}
+                      >
                         <RefreshCw className="mr-2 h-4 w-4" />
                         {t('accountCard.reconcile')}
                       </Link>
                     </Button>
-                    <Button variant="outline" size="sm">
-                      <Upload className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleEdit(conta)}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleDelete(conta.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    <div className="ml-auto flex shrink-0 gap-2">
+                      <Button variant="outline" size="sm">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleEdit(conta)}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(conta.id)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
                   </div>
                 </div>
               </CardContent>

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

@@ -35,7 +35,8 @@ import {
 import { StatusBadge } from '@/components/ui/status-badge';
 import { Check, DollarSign, Link2, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+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';
 
@@ -101,6 +102,10 @@ function CriarAjusteDialog({ t }: { t: ReturnType<typeof useTranslations> }) {
 
 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;
@@ -138,10 +143,43 @@ export default function ConciliacaoPage() {
     ),
   ];
 
-  const [contaFilter, setContaFilter] = useState<string>('1');
+  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
   );
@@ -171,8 +209,17 @@ export default function ConciliacaoPage() {
       />
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <Select value={contaFilter} onValueChange={setContaFilter}>
-          <SelectTrigger className="w-[280px]">
+        <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>

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

@@ -38,11 +38,34 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { ArrowDownRight, ArrowUpRight, Download, Upload } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
 import { formatarData } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
+
+type BankAccount = {
+  id: string;
+  banco: string;
+  descricao: string;
+  saldoAtual: number;
+};
+
+type Statement = {
+  id: string;
+  contaBancariaId: string;
+  data: string;
+  descricao: string;
+  valor: number;
+  tipo: 'entrada' | 'saida';
+  statusConciliacao:
+    | 'importado'
+    | 'pendente'
+    | 'conciliado'
+    | 'estornado'
+    | 'ajustado';
+};
 
 function ImportarExtratoDialog({
   contasBancarias,
@@ -101,20 +124,86 @@ function ImportarExtratoDialog({
 
 export default function ExtratosPage() {
   const t = useTranslations('finance.StatementsPage');
-  const { data } = useFinanceData();
-  const { extratos, contasBancarias } = data;
+  const { request } = useApp();
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const bankAccountIdFromUrl = searchParams.get('bank_account_id');
 
-  const [contaFilter, setContaFilter] = useState<string>('1');
+  const [contaFilter, setContaFilter] = useState<string>('');
   const [search, setSearch] = useState('');
 
-  const filteredExtratos = extratos.filter((extrato) => {
-    const matchesConta = extrato.contaBancariaId === contaFilter;
-    const matchesSearch = extrato.descricao
-      .toLowerCase()
-      .includes(search.toLowerCase());
-    return matchesConta && matchesSearch;
+  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[];
+    },
+    initialData: [],
+  });
+
+  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 } = 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[];
+    },
+    initialData: [],
   });
 
+  const filteredExtratos = useMemo(
+    () =>
+      extratos.filter((extrato) =>
+        extrato.descricao.toLowerCase().includes(search.toLowerCase())
+      ),
+    [extratos, search]
+  );
+
   const conta = contasBancarias.find((item) => item.id === contaFilter);
   const totalEntradas = filteredExtratos
     .filter((e) => e.tipo === 'entrada')
@@ -145,8 +234,17 @@ export default function ExtratosPage() {
       />
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <Select value={contaFilter} onValueChange={setContaFilter}>
-          <SelectTrigger className="w-[280px]">
+        <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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.228",
+  "version": "0.0.229",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -10,11 +10,11 @@
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
     "@hed-hog/api-prisma": "0.0.4",
-    "@hed-hog/tag": "0.0.223",
     "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/api-pagination": "0.0.5",
-    "@hed-hog/api-types": "0.0.1",
+    "@hed-hog/tag": "0.0.223",
     "@hed-hog/api": "0.0.3",
+    "@hed-hog/api-types": "0.0.1",
     "@hed-hog/contact": "0.0.223"
   },
   "exports": {