@hed-hog/finance 0.0.299 → 0.0.300

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',

package/hedhog/frontend/widgets/pending-approvals-kpi.tsx.ejs

@@ -0,0 +1,78 @@
+'use client';
+
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { Card, CardContent } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ClipboardList } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+interface PendingApprovalsKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  aprovacoesPendentes?: Array<{
+    valor?: number | null;
+  }>;
+}
+
+export default function PendingApprovalsKpi({
+  widget,
+  onRemove,
+}: PendingApprovalsKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-pending-approvals',
+    });
+
+  const pendingApprovals = data?.aprovacoesPendentes || [];
+  const count = pendingApprovals.length;
+  const totalValue = pendingApprovals.reduce(
+    (acc, item) => acc + Number(item?.valor || 0),
+    0
+  );
+  const formattedValue = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(totalValue);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.pendingApprovals.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-sky-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-sky-100/80">
+            <ClipboardList className="h-4.5 w-4.5 text-sky-600" />
+          </div>
+          <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.pendingApprovals.title')}
+            </span>
+            <div className="flex items-end gap-2">
+              <span className="truncate text-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
+                {count}
+              </span>
+              <span className="mb-0.5 text-[9px] text-muted-foreground">
+                {t('kpis.pendingApprovals.countLabel')}
+              </span>
+            </div>
+            <span className="truncate text-[9px] text-muted-foreground">
+              {t('kpis.pendingApprovals.description', {
+                value: formattedValue,
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/pending-approvals-list.tsx.ejs

@@ -0,0 +1,147 @@
+'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 { ClipboardCheck } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+interface PendingApprovalsListProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface ApprovalItem {
+  id: string;
+  tituloId?: string;
+  valor?: number | null;
+  politica?: string | null;
+  urgencia?: string | null;
+  dataSolicitacao?: string | null;
+}
+
+interface FinanceData {
+  aprovacoesPendentes?: ApprovalItem[];
+}
+
+function formatDate(value?: string | null) {
+  if (!value) return '—';
+
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime())
+    ? '—'
+    : parsed.toLocaleDateString('pt-BR');
+}
+
+export default function PendingApprovalsList({
+  widget,
+  onRemove,
+}: PendingApprovalsListProps) {
+  const t = useTranslations('finance.DashboardPage');
+  const approvalT = useTranslations('finance.PayableApprovalsPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-pending-approvals-list',
+    });
+
+  const rows = [...(data?.aprovacoesPendentes || [])]
+    .sort(
+      (a, b) =>
+        new Date(b?.dataSolicitacao || 0).getTime() -
+        new Date(a?.dataSolicitacao || 0).getTime()
+    )
+    .slice(0, 4);
+
+  const defaultUrgency = {
+    label: approvalT('urgency.medium'),
+    className: 'bg-blue-100 text-blue-700',
+  };
+
+  const urgencyConfig: Record<
+    string,
+    { label: string; className: string }
+  > = {
+    baixa: {
+      label: approvalT('urgency.low'),
+      className: 'bg-slate-100 text-slate-700',
+    },
+    media: defaultUrgency,
+    alta: {
+      label: approvalT('urgency.high'),
+      className: 'bg-orange-100 text-orange-700',
+    },
+    critica: {
+      label: approvalT('urgency.critical'),
+      className: 'bg-red-100 text-red-700',
+    },
+  };
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('approvalQueue.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader className="pb-2">
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ClipboardCheck className="h-4 w-4 text-sky-600" />
+            {t('approvalQueue.title')}
+          </CardTitle>
+          <CardDescription>{t('approvalQueue.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2.5">
+            {rows.map((item) => {
+              const urgency =
+                urgencyConfig[String(item.urgencia || 'media').toLowerCase()] ??
+                defaultUrgency;
+
+              return (
+                <Link
+                  key={item.id}
+                  href="/finance/accounts-payable/approvals"
+                  className="flex cursor-pointer items-center justify-between rounded-md border border-border/60 px-3 py-2 transition-colors hover:bg-muted/50 active:bg-muted"
+                >
+                  <div className="min-w-0 pr-3">
+                    <p className="truncate text-sm font-medium text-foreground">
+                      {item.politica || t('approvalQueue.defaultPolicy')}
+                    </p>
+                    <p className="text-[11px] text-muted-foreground">
+                      {formatDate(item.dataSolicitacao)}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="text-right text-sm font-medium text-foreground">
+                      <Money value={Number(item.valor || 0)} />
+                    </div>
+                    <Badge className={urgency.className}>{urgency.label}</Badge>
+                  </div>
+                </Link>
+              );
+            })}
+
+            {rows.length === 0 && (
+              <div className="rounded-md border border-dashed border-border/70 px-3 py-5 text-center text-sm text-muted-foreground">
+                {t('approvalQueue.empty')}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/widgets/pending-reconciliation-kpi.tsx.ejs

@@ -0,0 +1,84 @@
+'use client';
+
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+import { Card, CardContent } from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ArrowLeftRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+interface PendingReconciliationKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  extratos?: Array<{
+    statusConciliacao?: string | null;
+  }>;
+  contasBancarias?: Array<{
+    ativo?: boolean | null;
+  }>;
+}
+
+const normalize = (value?: string | null) =>
+  String(value || '')
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase();
+
+export default function PendingReconciliationKpi({
+  widget,
+  onRemove,
+}: PendingReconciliationKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-pending-reconciliation',
+    });
+
+  const pendingCount = (data?.extratos || []).filter((statement) =>
+    normalize(statement?.statusConciliacao).includes('pend')
+  ).length;
+
+  const activeAccounts = (data?.contasBancarias || []).filter(
+    (account) => account?.ativo !== false
+  ).length;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.pendingReconciliation.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-violet-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-violet-100/80">
+            <ArrowLeftRight className="h-4.5 w-4.5 text-violet-600" />
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col justify-center">
+            <span className="truncate text-[9px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              {t('kpis.pendingReconciliation.title')}
+            </span>
+            <div className="flex items-end gap-2">
+              <span className="truncate text-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
+                {pendingCount}
+              </span>
+              <span className="mb-0.5 truncate text-[9px] text-muted-foreground">
+                {t('kpis.pendingReconciliation.countLabel')}
+              </span>
+            </div>
+            <span className="truncate text-[9px] text-muted-foreground">
+              {t('kpis.pendingReconciliation.description', {
+                value: activeAccounts,
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -4,7 +4,7 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { TrendingUp } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface Receivable30dKpiProps {
   widget?: { name?: string };
@@ -45,19 +45,19 @@ export default function Receivable30dKpi({
       widgetName={widget?.name || t('kpis.receivable30.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-green-50">
-            <TrendingUp className="h-5 w-5 text-green-600" />
+      <Card className="h-full overflow-hidden border-border/60 bg-linear-to-br from-background to-green-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-green-100/80">
+            <TrendingUp className="h-4.5 w-4.5 text-green-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.receivable30.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.receivable30.sevenDays', {
                 value: new Intl.NumberFormat('pt-BR', {
                   style: 'currency',