@hed-hog/finance 0.0.299 → 0.0.301

package/hedhog/frontend/messages/pt.json

@@ -38,8 +38,44 @@
       "default": {
         "title": "Inadimplência",
         "description": "Títulos vencidos"
+      },
+      "pendingApprovals": {
+        "title": "Aprovações",
+        "countLabel": "abertas",
+        "description": "Em análise: {value}"
+      },
+      "pendingReconciliation": {
+        "title": "Conciliação",
+        "countLabel": "pendentes",
+        "description": "Contas ativas: {value}"
       }
     },
+    "bankReconciliation": {
+      "title": "Conciliação Bancária",
+      "description": "Extratos pendentes e diferenças por conta",
+      "pending": "Pendentes",
+      "reconciled": "Conciliados",
+      "accounts": "Contas",
+      "difference": "Diferença a revisar",
+      "allClear": "Todas as contas ativas estão conciliadas.",
+      "unnamedAccount": "Conta sem nome"
+    },
+    "approvalQueue": {
+      "title": "Fila de Aprovações",
+      "description": "Aprovações financeiras mais recentes aguardando ação",
+      "defaultPolicy": "Aprovação financeira",
+      "empty": "Não há aprovações pendentes no momento."
+    },
+    "aging": {
+      "title": "Aging de Recebíveis",
+      "description": "Inadimplência segmentada por faixa de atraso",
+      "totalLabel": "Total em atraso",
+      "clientsLabel": "Clientes impactados",
+      "range0to30": "0-30 dias",
+      "range31to60": "31-60 dias",
+      "range61to90": "61-90 dias",
+      "range90plus": "90+ dias"
+    },
     "cashFlow": {
       "title": "Fluxo de Caixa",
       "description": "Previsto vs Realizado"
@@ -94,11 +130,12 @@
         "actions": "Ações"
       }
     },
-    "empty": {
-      "title": "Tudo em dia!",
-      "description": "Não há aprovações pendentes."
-    }
-  },
+    "empty": {
+      "title": "Tudo em dia!",
+      "description": "Não há aprovações pendentes.",
+      "refresh": "Atualizar"
+    }
+  },
   "PersonFieldWithCreate": {
     "sheet": {
       "title": "Novo {entityLabel}",
@@ -233,33 +270,71 @@
       "cash": "Dinheiro",
       "check": "Cheque"
     },
-    "header": {
-      "title": "Títulos a Pagar",
-      "description": "Gerencie suas contas a pagar"
-    },
-    "breadcrumbs": {
-      "home": "Início",
-      "finance": "Financeiro",
-      "current": "Títulos a Pagar"
-    },
+    "header": {
+      "title": "Títulos a Pagar",
+      "description": "Gerencie suas contas a pagar"
+    },
+    "summary": {
+      "cards": {
+        "visible": {
+          "title": "Títulos exibidos",
+          "description": "{total} registros no total"
+        },
+        "value": {
+          "title": "Valor visível",
+          "description": "Somatório da página atual"
+        },
+        "attention": {
+          "title": "Pendentes",
+          "description": "{overdue} com atraso"
+        }
+      }
+    },
+    "breadcrumbs": {
+      "home": "Início",
+      "finance": "Financeiro",
+      "current": "Títulos a Pagar"
+    },
     "filters": {
       "searchPlaceholder": "Buscar por documento ou fornecedor...",
       "status": "Status"
     },
-    "statuses": {
-      "all": "Todos",
-      "rascunho": "Rascunho",
-      "aprovado": "Aprovado",
-      "aberto": "Aberto",
+    "statuses": {
+      "all": "Todos",
+      "rascunho": "Rascunho",
+      "aprovado": "Aprovado",
+      "aberto": "Aberto",
       "parcial": "Parcial",
       "liquidado": "Liquidado",
-      "vencido": "Vencido",
-      "cancelado": "Cancelado"
-    },
-    "table": {
-      "headers": {
-        "document": "Documento",
-        "supplier": "Fornecedor",
+      "vencido": "Vencido",
+      "cancelado": "Cancelado"
+    },
+    "list": {
+      "title": "Carteira de títulos",
+      "description": "Acompanhe documentos, vencimentos e ações operacionais da página atual."
+    },
+    "sections": {
+      "main": {
+        "title": "Dados principais",
+        "description": "Informe documento, fornecedor, datas e valor total do título."
+      },
+      "installments": {
+        "title": "Parcelas",
+        "description": "Revise o cronograma de vencimentos e ajuste os valores antes de salvar."
+      },
+      "classification": {
+        "title": "Classificação financeira",
+        "description": "Associe categoria, centro de custo e forma de pagamento para organizar a operação."
+      },
+      "notes": {
+        "title": "Observações",
+        "description": "Use este campo para complementar o contexto do título quando necessário."
+      }
+    },
+    "table": {
+      "headers": {
+        "document": "Documento",
+        "supplier": "Fornecedor",
         "competency": "Competência",
         "dueDate": "Vencimento",
         "value": "Valor",
@@ -297,12 +372,18 @@
         "confirm": "Confirmar estorno"
       }
     },
-    "settleSheet": {
-      "title": "Registrar baixa",
-      "description": "Informe a parcela e o valor da baixa para o título {document}.",
-      "installmentLabel": "Parcela",
-      "installmentPlaceholder": "Selecione",
-      "installmentOption": "Parcela {number} - em aberto: {amount}",
+    "settleSheet": {
+      "title": "Registrar baixa",
+      "description": "Informe a parcela e o valor da baixa para o título {document}.",
+      "sections": {
+        "payment": {
+          "title": "Dados da baixa",
+          "description": "Selecione a parcela disponível e confirme o valor a ser liquidado."
+        }
+      },
+      "installmentLabel": "Parcela",
+      "installmentPlaceholder": "Selecione",
+      "installmentOption": "Parcela {number} - em aberto: {amount}",
       "amountLabel": "Valor",
       "descriptionLabel": "Descrição (opcional)",
       "confirm": "Confirmar baixa"
@@ -635,31 +716,69 @@
       "card": "Cartão",
       "transfer": "Transferência"
     },
-    "header": {
-      "title": "Títulos a Receber",
-      "description": "Gerencie suas contas a receber"
-    },
-    "breadcrumbs": {
-      "home": "Início",
-      "finance": "Financeiro",
-      "current": "Títulos a Receber"
+    "header": {
+      "title": "Títulos a Receber",
+      "description": "Gerencie suas contas a receber"
+    },
+    "summary": {
+      "cards": {
+        "visible": {
+          "title": "Títulos exibidos",
+          "description": "{total} registros no total"
+        },
+        "value": {
+          "title": "Valor visível",
+          "description": "Somatório da página atual"
+        },
+        "attention": {
+          "title": "Pendentes",
+          "description": "{overdue} com atraso"
+        }
+      }
+    },
+    "breadcrumbs": {
+      "home": "Início",
+      "finance": "Financeiro",
+      "current": "Títulos a Receber"
     },
     "filters": {
       "searchPlaceholder": "Buscar por documento ou cliente...",
       "status": "Status"
     },
-    "statuses": {
-      "all": "Todos",
-      "aberto": "Aberto",
-      "parcial": "Parcial",
-      "liquidado": "Liquidado",
-      "vencido": "Vencido",
-      "cancelado": "Cancelado"
-    },
-    "table": {
-      "headers": {
-        "document": "Documento",
-        "client": "Cliente",
+    "statuses": {
+      "all": "Todos",
+      "aberto": "Aberto",
+      "parcial": "Parcial",
+      "liquidado": "Liquidado",
+      "vencido": "Vencido",
+      "cancelado": "Cancelado"
+    },
+    "list": {
+      "title": "Carteira de recebíveis",
+      "description": "Acompanhe clientes, vencimentos e ações operacionais da página atual."
+    },
+    "sections": {
+      "main": {
+        "title": "Dados principais",
+        "description": "Informe documento, cliente, datas e valor total do título."
+      },
+      "installments": {
+        "title": "Parcelas",
+        "description": "Revise o cronograma de vencimentos e ajuste os valores antes de salvar."
+      },
+      "classification": {
+        "title": "Classificação financeira",
+        "description": "Associe categoria, centro de custo e canal de recebimento para organizar a operação."
+      },
+      "notes": {
+        "title": "Observações",
+        "description": "Use este campo para complementar o contexto do título quando necessário."
+      }
+    },
+    "table": {
+      "headers": {
+        "document": "Documento",
+        "client": "Cliente",
         "competency": "Competência",
         "dueDate": "Vencimento",
         "value": "Valor",
@@ -674,15 +793,20 @@
         "sendCollection": "Enviar Cobrança",
         "openAttachment": "Abrir anexo"
       }
-    },
-    "installmentsEditor": {
-      "title": "Parcelas",
-      "countLabel": "Quantidade de Parcelas",
-      "recalculate": "Recalcular automaticamente",
-      "autoRedistributeLabel": "Redistribuir automaticamente o restante ao editar parcela",
-      "dueDateLabel": "Vencimento",
-      "amountLabel": "Valor",
-      "totalPrefix": "Soma das parcelas: {total}",
+    },
+    "empty": {
+      "title": "Nenhum título encontrado",
+      "description": "Cadastre o primeiro título para começar a gerenciar contas a receber."
+    },
+    "installmentsEditor": {
+      "title": "Parcelas",
+      "countLabel": "Quantidade de Parcelas",
+      "recalculate": "Recalcular automaticamente",
+      "autoRedistributeLabel": "Redistribuir automaticamente o restante ao editar parcela",
+      "autoRedistributeHint": "A redistribuição ocorre ao parar de digitar e ao sair do campo.",
+      "dueDateLabel": "Vencimento",
+      "amountLabel": "Valor",
+      "totalPrefix": "Soma das parcelas: {total}",
       "adjustmentNeeded": "(ajuste necessário)"
     },
     "editTitle": {
@@ -837,7 +961,12 @@
       "updateSuccess": "Conta bancária atualizada com sucesso",
       "updateError": "Erro ao atualizar conta bancária",
       "deleteSuccess": "Conta bancária inativada com sucesso",
-      "deleteError": "Erro ao inativar conta bancária"
+      "deleteError": "Erro ao inativar conta bancária",
+      "logoUploadSuccess": "Logo enviado com sucesso",
+      "logoUploadError": "Erro ao enviar logo",
+      "logoRemoveSuccess": "Logo removido com sucesso",
+      "logoInvalidType": "Selecione um arquivo de imagem válido",
+      "logoTooLarge": "O logo deve ter no máximo 5 MB"
     },
     "deleteDialog": {
       "title": "Inativar conta bancária",
@@ -863,7 +992,12 @@
       "type": "Tipo",
       "description": "Descrição",
       "descriptionPlaceholder": "Ex: Conta Principal",
-      "initialBalance": "Saldo Inicial"
+      "initialBalance": "Saldo Inicial",
+      "logo": "Logo",
+      "logoAction": "Enviar logo",
+      "logoRemove": "Remover logo",
+      "logoHint": "Opcional. Use preferencialmente uma imagem quadrada.",
+      "logoUploading": "Enviando logo... {progress}%"
     },
     "header": {
       "title": "Contas Bancárias",
@@ -874,13 +1008,33 @@
       "finance": "Financeiro",
       "current": "Contas Bancárias"
     },
-    "cards": {
-      "totalBalance": "Saldo Total",
-      "activeAccounts": "{count} contas ativas",
-      "reconciledBalance": "Saldo Conciliado",
-      "difference": "Diferença"
-    },
-    "status": { "inactive": "Inativa" },
+    "cards": {
+      "totalBalance": "Saldo Total",
+      "activeAccounts": "{count} contas ativas",
+      "reconciledBalance": "Saldo Conciliado",
+      "difference": "Diferença",
+      "accountsOverview": "Contas ativas",
+      "inactiveAccounts": "{count} contas inativas"
+    },
+    "sections": {
+      "accountData": {
+        "title": "Dados da conta",
+        "description": "Preencha os dados principais para identificar e classificar a conta bancária."
+      },
+      "logo": {
+        "title": "Logo e identificação visual",
+        "description": "Adicione uma imagem opcional para facilitar a identificação da conta nas listagens."
+      }
+    },
+    "list": {
+      "title": "Contas cadastradas",
+      "description": "Acompanhe saldos, conciliação e acessos rápidos para cada conta bancária."
+    },
+    "empty": {
+      "title": "Nenhuma conta bancária cadastrada",
+      "description": "Crie a primeira conta para começar a registrar saldos, extratos e conciliações."
+    },
+    "status": { "inactive": "Inativa" },
     "accountCard": {
       "bankAccount": "Ag: {agency} | Cc: {account}",
       "currentBalance": "Saldo Atual",

package/hedhog/frontend/widgets/alerts.tsx.ejs

@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { AlertTriangle } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface FinanceData {
   titulosPagar?: Array<{

package/hedhog/frontend/widgets/bank-reconciliation-status.tsx.ejs

@@ -0,0 +1,142 @@
+'use client';
+
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { Landmark } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+interface ReconciliationWidgetProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  extratos?: Array<{
+    statusConciliacao?: string | null;
+  }>;
+  contasBancarias?: Array<{
+    id: string;
+    banco?: string | null;
+    nome?: string | null;
+    saldoAtual?: number | null;
+    saldoConciliado?: number | null;
+    ativo?: boolean | null;
+  }>;
+}
+
+const normalize = (value?: string | null) =>
+  String(value || '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+
+export default function BankReconciliationStatus({
+  widget,
+  onRemove,
+}: ReconciliationWidgetProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-bank-reconciliation-status',
+    });
+
+  const statements = data?.extratos || [];
+  const bankAccounts = (data?.contasBancarias || []).filter(
+    (account) => account?.ativo !== false
+  );
+
+  const pendingCount = statements.filter((statement) =>
+    normalize(statement?.statusConciliacao).includes('pend')
+  ).length;
+  const reconciledCount = Math.max(statements.length - pendingCount, 0);
+
+  const accountDiffs = bankAccounts
+    .map((account) => ({
+      id: account.id,
+      name: account.nome || account.banco || t('bankReconciliation.unnamedAccount'),
+      difference: Math.abs(
+        Number(account.saldoAtual || 0) - Number(account.saldoConciliado || 0)
+      ),
+    }))
+    .sort((a, b) => b.difference - a.difference);
+
+  const totalDifference = accountDiffs.reduce(
+    (acc, account) => acc + account.difference,
+    0
+  );
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('bankReconciliation.title')}
+      onRemove={onRemove}
+    >
+      <Card className="flex h-full flex-col">
+        <CardHeader className="pb-2">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <Landmark className="h-4 w-4 text-sky-600" />
+            {t('bankReconciliation.title')}
+          </CardTitle>
+          <CardDescription>{t('bankReconciliation.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-1 flex-col gap-3 pt-0">
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="border-amber-200 bg-amber-50 text-amber-700">
+              {t('bankReconciliation.pending')}: {pendingCount}
+            </Badge>
+            <Badge variant="outline" className="border-emerald-200 bg-emerald-50 text-emerald-700">
+              {t('bankReconciliation.reconciled')}: {reconciledCount}
+            </Badge>
+            <Badge variant="secondary" className="bg-slate-100 text-slate-700">
+              {t('bankReconciliation.accounts')}: {bankAccounts.length}
+            </Badge>
+          </div>
+
+          <div className="rounded-lg bg-muted/40 p-3">
+            <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground">
+              {t('bankReconciliation.difference')}
+            </p>
+            <p className="text-lg font-semibold text-foreground">
+              <Money value={totalDifference} />
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            {accountDiffs.slice(0, 3).map((account) => (
+              <div
+                key={account.id}
+                className="flex items-center justify-between rounded-md border border-border/60 px-3 py-2"
+              >
+                <span className="truncate pr-3 text-sm text-foreground">
+                  {account.name}
+                </span>
+                <span className="text-sm font-medium text-muted-foreground">
+                  <Money value={account.difference} />
+                </span>
+              </div>
+            ))}
+
+            {accountDiffs.length === 0 && (
+              <div className="rounded-md border border-dashed border-emerald-200 bg-emerald-50 px-3 py-4 text-sm text-emerald-700">
+                {t('bankReconciliation.allClear')}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/cash-balance-kpi.tsx.ejs

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { Wallet } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface CashBalanceKpiProps {
   widget?: { name?: string };
@@ -43,19 +43,19 @@ export default function CashBalanceKpi({
       widgetName={widget?.name || t('kpis.cashBalance.title')}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-3 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-50">
-            <Wallet className="h-5 w-5 text-emerald-600" />
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-emerald-50/40 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-100/80">
+            <Wallet className="h-4.5 w-4.5 text-emerald-600" />
           </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="text-[9px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
               {t('kpis.cashBalance.title')}
             </span>
-            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+            <span className="truncate text-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
               {formatted}
             </span>
-            <span className="text-[10px] text-muted-foreground">
+            <span className="truncate text-[9px] text-muted-foreground">
               {t('kpis.cashBalance.description')}
             </span>
           </div>

package/hedhog/frontend/widgets/cash-flow-chart.tsx.ejs

@@ -19,7 +19,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface CashFlowPoint {
   data: string;

package/hedhog/frontend/widgets/default-kpi.tsx.ejs

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { AlertTriangle } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface DefaultKpiProps {
   widget?: { name?: string };
@@ -40,19 +40,19 @@ export default function DefaultKpi({ widget, onRemove }: DefaultKpiProps) {
       widgetName={widget?.name || t('kpis.default.title')}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-3 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-amber-50">
-            <AlertTriangle className="h-5 w-5 text-amber-600" />
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-amber-50/50 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100/80">
+            <AlertTriangle className="h-4.5 w-4.5 text-amber-600" />
           </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="text-[9px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
               {t('kpis.default.title')}
             </span>
-            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+            <span className="truncate text-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
               {formatted}
             </span>
-            <span className="text-[10px] text-muted-foreground">
+            <span className="truncate text-[9px] text-muted-foreground">
               {t('kpis.default.description')}
             </span>
           </div>

package/hedhog/frontend/widgets/payable-30d-kpi.tsx.ejs

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { TrendingDown } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface Payable30dKpiProps {
   widget?: { name?: string };
@@ -45,19 +45,19 @@ export default function Payable30dKpi({
       widgetName={widget?.name || t('kpis.payable30.title')}
       onRemove={onRemove}
     >
-      <Card className="h-full overflow-hidden transition-all duration-300 hover:shadow-md">
-        <CardContent className="flex h-full items-center gap-3 p-4">
-          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-red-50">
-            <TrendingDown className="h-5 w-5 text-red-600" />
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-red-50/50 shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-md">
+        <CardContent className="flex h-full items-center gap-2.5 p-3">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-red-100/80">
+            <TrendingDown className="h-4.5 w-4.5 text-red-600" />
           </div>
-          <div className="flex min-w-0 flex-col">
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="text-[9px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
               {t('kpis.payable30.title')}
             </span>
-            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+            <span className="truncate text-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
               {formatted}
             </span>
-            <span className="text-[10px] text-muted-foreground">
+            <span className="truncate text-[9px] text-muted-foreground">
               {t('kpis.payable30.sevenDays', {
                 value: new Intl.NumberFormat('pt-BR', {
                   style: 'currency',