@hed-hog/finance 0.0.318 → 0.0.319

package/hedhog/data/role.yaml

@@ -4,4 +4,12 @@
     pt: Administrador de Finanças
   description:
     en: Administrator with full access to finance management.
-    pt: Administrador com acesso total à gestão financeira.
+    pt: Administrador com acesso total à gestão financeira.
+
+- slug: finance-statements-editor
+  name:
+    en: Finance Statements Editor
+    pt: Editor de Extratos Bancários
+  description:
+    en: Can add, edit, and delete bank statement entries.
+    pt: Pode adicionar, editar e excluir registros de extrato bancário.

package/hedhog/data/route.yaml

@@ -493,6 +493,48 @@
       - where:
           slug: admin-finance
 
+- url: /finance/statements
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+      - where:
+          slug: finance-statements-editor
+
+- url: /finance/statements/:id
+  method: PATCH
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+      - where:
+          slug: finance-statements-editor
+
+- url: /finance/statements/:id
+  method: DELETE
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+      - where:
+          slug: finance-statements-editor
+
+- url: /finance/bank-reconciliations/:id
+  method: DELETE
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
 - url: /finance/transfers
   method: GET
   relations:

package/hedhog/frontend/app/accounts-payable/approvals/page.tsx.ejs

@@ -1,9 +1,12 @@
 'use client';
 
-'use client';
-
 import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -27,12 +30,29 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
-import { useApp } from '@hed-hog/next-app-provider';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { formatarData } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
+
+type ApprovalTitle = {
+  id: string;
+  documento: string;
+  fornecedor?: string;
+  valorTotal: number;
+  criadoEm: string;
+};
+
+type PaginatedResponse<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  prev: number | null;
+  next: number | null;
+  lastPage: number;
+};
 
 function AprovacaoDialog({
   tipo,
@@ -63,7 +83,7 @@ function AprovacaoDialog({
           )}
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="sm:max-w-lg">
         <DialogHeader>
           <DialogTitle>
             {isAprovar ? t('dialog.approveTitle') : t('dialog.rejectTitle')}
@@ -109,39 +129,39 @@ function AprovacaoDialog({
 export default function AprovacoesPage() {
   const t = useTranslations('finance.PayableApprovalsPage');
   const { request, showToastHandler } = useApp();
-  const { data, refetch } = useFinanceData();
-  const { aprovacoesPendentes, titulosPagar, pessoas } = data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-
-  const aprovacoes = useMemo(() => {
-    const pendenciasDoBackend = Array.isArray(aprovacoesPendentes)
-      ? aprovacoesPendentes
-      : [];
-
-    const pendenciasDerivadasDosTitulos = (
-      Array.isArray(titulosPagar) ? titulosPagar : []
-    )
-      .filter(
-        (titulo) => titulo.status === 'rascunho' || titulo.status === 'draft'
-      )
-      .map((titulo) => ({
-        id: String(titulo.id),
-        tituloId: String(titulo.id),
-        solicitante: '-',
-        valor: Number(titulo.valorTotal || 0),
-        politica: 'Aprovação financeira',
-        urgencia: 'media',
-        dataSolicitacao: titulo.criadoEm,
-      }));
+  const [page, setPage] = useState(1);
+  const pageSize = 10;
+  const {
+    data: approvalsResponse,
+    refetch,
+  } = useQuery<PaginatedResponse<ApprovalTitle>>({
+    queryKey: ['finance-payable-approvals', page, pageSize],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/accounts-payable/installments',
+        method: 'GET',
+        params: {
+          status: 'rascunho',
+          page,
+          pageSize,
+        },
+      });
 
-    const basePendencias =
-      pendenciasDoBackend.length > 0
-        ? pendenciasDoBackend
-        : pendenciasDerivadasDosTitulos;
+      return (response?.data || {
+        data: [],
+        total: 0,
+        page,
+        pageSize,
+        prev: null,
+        next: null,
+        lastPage: 1,
+      }) as PaginatedResponse<ApprovalTitle>;
+    },
+    placeholderData: (old) => old,
+  });
 
-    return basePendencias;
-  }, [aprovacoesPendentes, titulosPagar]);
+  const aprovacoes = approvalsResponse?.data ?? [];
+  const totalAprovacoes = approvalsResponse?.total ?? 0;
 
   const handleAprovacao = async (_id: string, tituloId?: string) => {
     if (!tituloId) {
@@ -207,15 +227,17 @@ export default function AprovacoesPage() {
     },
   };
 
-  const totalPendente = aprovacoes.reduce((acc, a) => acc + a.valor, 0);
-  const urgentCount = aprovacoes.filter(
-    (a) => a.urgencia === 'alta' || a.urgencia === 'critica'
-  ).length;
+  const totalPendente = aprovacoes.reduce(
+    (acc, aprovacao) => acc + Number(aprovacao.valorTotal || 0),
+    0
+  );
+  const urgentCount = 0;
+
   const summaryCards = [
     {
       key: 'pending',
       title: t('cards.pending'),
-      value: aprovacoes.length,
+      value: totalAprovacoes,
       icon: Clock,
       layout: 'compact' as const,
     },
@@ -252,7 +274,7 @@ export default function AprovacoesPage() {
       <KpiCardsGrid items={summaryCards} columns={3} />
 
       <FinancePageSection variant="flat">
-        {aprovacoes.length > 0 ? (
+        {totalAprovacoes > 0 ? (
           <div className="overflow-x-auto">
             <Table>
               <TableHeader>
@@ -273,30 +295,20 @@ export default function AprovacoesPage() {
               </TableHeader>
               <TableBody>
                 {aprovacoes.map((aprovacao) => {
-                  const titulo = titulosPagar.find(
-                    (t) => t.id === aprovacao.tituloId
-                  );
-                  const fornecedor = titulo
-                    ? getPessoaById(titulo.fornecedorId)
-                    : null;
-                  const urgencia =
-                    urgenciaConfig[
-                      aprovacao.urgencia as keyof typeof urgenciaConfig
-                    ] || urgenciaConfig.media;
-
+                  const urgencia = urgenciaConfig.media;
                   return (
                     <TableRow key={aprovacao.id} className="hover:bg-muted/30">
                       <TableCell className="font-medium">
-                        {titulo?.documento}
+                        {aprovacao.documento}
                       </TableCell>
-                      <TableCell>{fornecedor?.nome}</TableCell>
-                      <TableCell>{aprovacao.solicitante}</TableCell>
+                      <TableCell>{aprovacao.fornecedor || '-'}</TableCell>
+                      <TableCell>-</TableCell>
                       <TableCell className="text-right">
-                        <Money value={aprovacao.valor} />
+                        <Money value={aprovacao.valorTotal} />
                       </TableCell>
                       <TableCell>
                         <span className="text-sm text-muted-foreground">
-                          {aprovacao.politica}
+                          Aprovação financeira
                         </span>
                       </TableCell>
                       <TableCell>
@@ -305,29 +317,20 @@ export default function AprovacoesPage() {
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        {formatarData(aprovacao.dataSolicitacao)}
+                        {formatarData(aprovacao.criadoEm)}
                       </TableCell>
                       <TableCell>
                         <div className="flex justify-end gap-2">
                           <AprovacaoDialog
                             tipo="aprovar"
                             t={t}
-                            onConfirm={() =>
-                              void handleAprovacao(
-                                aprovacao.id,
-                                aprovacao.tituloId
-                              )
-                            }
+                            onConfirm={() => void handleAprovacao(aprovacao.id, aprovacao.id)}
                           />
                           <AprovacaoDialog
                             tipo="reprovar"
                             t={t}
                             onConfirm={(comment) =>
-                              void handleReprovacao(
-                                aprovacao.id,
-                                aprovacao.tituloId,
-                                comment
-                              )
+                              void handleReprovacao(aprovacao.id, aprovacao.id, comment)
                             }
                           />
                         </div>
@@ -347,6 +350,18 @@ export default function AprovacoesPage() {
             onAction={() => void refetch()}
           />
         )}
+        {totalAprovacoes > 0 ? (
+          <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={pageSize}
+              totalItems={totalAprovacoes}
+              onPageChange={setPage}
+              onPageSizeChange={() => undefined}
+              pageSizeOptions={[10]}
+            />
+          </div>
+        ) : null}
       </FinancePageSection>
     </Page>
   );

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

@@ -20,6 +20,7 @@ import {
 } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
 import {
   Form,
   FormControl,
@@ -1260,6 +1261,12 @@ function NovoTituloSheet({
                             <SelectItem value="cartao">
                               {t('paymentMethods.card')}
                             </SelectItem>
+                            <SelectItem value="debito_automatico">
+                              D&#233;bito autom&#225;tico
+                            </SelectItem>
+                            <SelectItem value="debito_em_conta">
+                              D&#233;bito em conta
+                            </SelectItem>
                             <SelectItem value="dinheiro">
                               {t('paymentMethods.cash')}
                             </SelectItem>
@@ -2371,6 +2378,12 @@ function EditarTituloSheet({
                             <SelectItem value="cartao">
                               {t('paymentMethods.card')}
                             </SelectItem>
+                            <SelectItem value="debito_automatico">
+                              D&#233;bito autom&#225;tico
+                            </SelectItem>
+                            <SelectItem value="debito_em_conta">
+                              D&#233;bito em conta
+                            </SelectItem>
                             <SelectItem value="dinheiro">
                               {t('paymentMethods.cash')}
                             </SelectItem>
@@ -2491,6 +2504,8 @@ export default function TitulosPagarPage() {
 
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
   const [page, setPage] = useState(1);
   const pageSize = 10;
   const [isNewTitleSheetOpen, setIsNewTitleSheetOpen] = useState(false);
@@ -2540,6 +2555,8 @@ export default function TitulosPagarPage() {
       'finance-payable-installments-list',
       search,
       normalizedStatusFilter,
+      fromDate,
+      toDate,
       page,
       pageSize,
     ],
@@ -2552,6 +2569,8 @@ export default function TitulosPagarPage() {
           pageSize,
           search: search.trim() || undefined,
           status: normalizedStatusFilter,
+          from: fromDate || undefined,
+          to: toDate || undefined,
         },
       });
 
@@ -2649,7 +2668,7 @@ export default function TitulosPagarPage() {
 
   useEffect(() => {
     setPage(1);
-  }, [search, normalizedStatusFilter]);
+  }, [search, normalizedStatusFilter, fromDate, toDate]);
 
   const editingTitle = useMemo(
     () =>
@@ -2922,30 +2941,39 @@ export default function TitulosPagarPage() {
 
       <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <div className="min-w-0">
-        <SearchBar
-          searchQuery={search}
-          onSearchChange={setSearch}
-          onSearch={() => undefined}
-          placeholder={t('filters.searchPlaceholder')}
-          controls={[
-            {
-              id: 'status',
-              type: 'select',
-              value: statusFilter,
-              onChange: setStatusFilter,
-              placeholder: t('filters.status'),
-              options: [
-                { value: 'all', label: t('statuses.all') },
-                { value: 'rascunho', label: t('statuses.rascunho') },
-                { value: 'aberto', label: t('statuses.aberto') },
-                { value: 'parcial', label: t('statuses.parcial') },
-                { value: 'liquidado', label: t('statuses.liquidado') },
-                { value: 'vencido', label: t('statuses.vencido') },
-                { value: 'cancelado', label: t('statuses.cancelado') },
-              ],
-            },
-          ]}
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onSearch={() => undefined}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: setStatusFilter,
+                placeholder: t('filters.status'),
+                options: [
+                  { value: 'all', label: t('statuses.all') },
+                  { value: 'rascunho', label: t('statuses.rascunho') },
+                  { value: 'aberto', label: t('statuses.aberto') },
+                  { value: 'parcial', label: t('statuses.parcial') },
+                  { value: 'liquidado', label: t('statuses.liquidado') },
+                  { value: 'vencido', label: t('statuses.vencido') },
+                  { value: 'cancelado', label: t('statuses.cancelado') },
+                ],
+              },
+            ]}
+          />
+        </div>
+        <DateRangePicker
+          fromDate={fromDate}
+          toDate={toDate}
+          onFromDateChange={setFromDate}
+          onToDateChange={setToDate}
+          defaultPreset="thisMonth"
         />
       </div>
 

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

@@ -185,6 +185,14 @@ export default function TituloReceberDetalhePage() {
       label: t('channels.transfer'),
       className: 'bg-orange-100 text-orange-700',
     },
+    debito_automatico: {
+      label: 'D\u00e9bito autom\u00e1tico',
+      className: 'bg-emerald-100 text-emerald-700',
+    },
+    debito_em_conta: {
+      label: 'D\u00e9bito em conta',
+      className: 'bg-cyan-100 text-cyan-700',
+    },
   };
 
   if (!titulo) {

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

@@ -20,6 +20,7 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -1238,6 +1239,12 @@ function NovoTituloSheet({
                             <SelectItem value="transferencia">
                               {t('channels.transfer')}
                             </SelectItem>
+                            <SelectItem value="debito_automatico">
+                              D&#233;bito autom&#225;tico
+                            </SelectItem>
+                            <SelectItem value="debito_em_conta">
+                              D&#233;bito em conta
+                            </SelectItem>
                           </SelectContent>
                         </Select>
                         <FormMessage />
@@ -2340,6 +2347,12 @@ function EditarTituloSheet({
                             <SelectItem value="transferencia">
                               {t('channels.transfer')}
                             </SelectItem>
+                            <SelectItem value="debito_automatico">
+                              D&#233;bito autom&#225;tico
+                            </SelectItem>
+                            <SelectItem value="debito_em_conta">
+                              D&#233;bito em conta
+                            </SelectItem>
                           </SelectContent>
                         </Select>
                         <FormMessage />
@@ -2427,6 +2440,8 @@ export default function TitulosReceberPage() {
 
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
   const [page, setPage] = useState(1);
   const pageSize = 10;
 
@@ -2446,6 +2461,8 @@ export default function TitulosReceberPage() {
       'finance-receivable-installments-list',
       search,
       normalizedStatusFilter,
+      fromDate,
+      toDate,
       page,
       pageSize,
     ],
@@ -2458,6 +2475,8 @@ export default function TitulosReceberPage() {
           pageSize,
           search: search.trim() || undefined,
           status: normalizedStatusFilter,
+          from: fromDate || undefined,
+          to: toDate || undefined,
         },
       });
 
@@ -2595,7 +2614,7 @@ export default function TitulosReceberPage() {
 
   useEffect(() => {
     setPage(1);
-  }, [search, normalizedStatusFilter]);
+  }, [search, normalizedStatusFilter, fromDate, toDate]);
 
   const canalBadge = {
     boleto: {
@@ -2611,6 +2630,14 @@ export default function TitulosReceberPage() {
       label: t('channels.transfer'),
       className: 'bg-orange-100 text-orange-700',
     },
+    debito_automatico: {
+      label: 'D\u00e9bito autom\u00e1tico',
+      className: 'bg-emerald-100 text-emerald-700',
+    },
+    debito_em_conta: {
+      label: 'D\u00e9bito em conta',
+      className: 'bg-cyan-100 text-cyan-700',
+    },
   };
 
   const handleOpenAttachment = async (fileId?: string) => {
@@ -2675,29 +2702,38 @@ export default function TitulosReceberPage() {
 
       <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <div className="min-w-0">
-        <SearchBar
-          searchQuery={search}
-          onSearchChange={setSearch}
-          onSearch={() => undefined}
-          placeholder={t('filters.searchPlaceholder')}
-          controls={[
-            {
-              id: 'status',
-              type: 'select',
-              value: statusFilter,
-              onChange: setStatusFilter,
-              placeholder: t('filters.status'),
-              options: [
-                { value: 'all', label: t('statuses.all') },
-                { value: 'aberto', label: t('statuses.aberto') },
-                { value: 'parcial', label: t('statuses.parcial') },
-                { value: 'liquidado', label: t('statuses.liquidado') },
-                { value: 'vencido', label: t('statuses.vencido') },
-                { value: 'cancelado', label: t('statuses.cancelado') },
-              ],
-            },
-          ]}
+      <div className="flex min-w-0 flex-wrap items-center gap-2">
+        <div className="min-w-0 flex-1">
+          <SearchBar
+            searchQuery={search}
+            onSearchChange={setSearch}
+            onSearch={() => undefined}
+            placeholder={t('filters.searchPlaceholder')}
+            controls={[
+              {
+                id: 'status',
+                type: 'select',
+                value: statusFilter,
+                onChange: setStatusFilter,
+                placeholder: t('filters.status'),
+                options: [
+                  { value: 'all', label: t('statuses.all') },
+                  { value: 'aberto', label: t('statuses.aberto') },
+                  { value: 'parcial', label: t('statuses.parcial') },
+                  { value: 'liquidado', label: t('statuses.liquidado') },
+                  { value: 'vencido', label: t('statuses.vencido') },
+                  { value: 'cancelado', label: t('statuses.cancelado') },
+                ],
+              },
+            ]}
+          />
+        </div>
+        <DateRangePicker
+          fromDate={fromDate}
+          toDate={toDate}
+          onFromDateChange={setFromDate}
+          onToDateChange={setToDate}
+          defaultPreset="thisMonth"
         />
       </div>