@hed-hog/finance 0.0.298 → 0.0.300

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+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 '@/app/(app)/(libraries)/core/dashboard/components';
+
+interface FinanceData {
+  titulosPagar?: Array<{
+    status: string;
+    parcelas: Array<{ status: string }>;
+  }>;
+  extratos?: Array<{
+    statusConciliacao: string;
+  }>;
+  periodoAberto?: {
+    inicio?: string | null;
+  } | null;
+}
+
+interface AlertsProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function Alerts({ widget, onRemove }: AlertsProps) {
+  const t = useTranslations('finance.DashboardPage');
+  const locale = useLocale();
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-alerts',
+    });
+
+  const approvedPayables = (data?.titulosPagar || []).filter(
+    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
+  );
+
+  const overdue = approvedPayables.filter((titulo) =>
+    titulo.parcelas.some((p) => p.status === 'vencido')
+  ).length;
+
+  const pendingReconciliation = (data?.extratos || []).filter(
+    (e) => e.statusConciliacao === 'pendente'
+  ).length;
+
+  const periodBase = data?.periodoAberto?.inicio
+    ? new Date(data.periodoAberto.inicio)
+    : new Date();
+  const month = new Intl.DateTimeFormat(locale, { month: 'long' }).format(
+    periodBase
+  );
+  const currentPeriod = `${month.charAt(0).toUpperCase()}${month.slice(1)}/${periodBase.getFullYear()}`;
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('alerts.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <AlertTriangle className="h-4 w-4 text-yellow-500" />
+            {t('alerts.title')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {overdue > 0 && (
+              <div className="flex items-center justify-between rounded-lg bg-red-50 p-3">
+                <span className="text-sm">{t('alerts.overdueTitles')}</span>
+                <Badge variant="destructive">{overdue}</Badge>
+              </div>
+            )}
+            {pendingReconciliation > 0 && (
+              <div className="flex items-center justify-between rounded-lg bg-yellow-50 p-3">
+                <span className="text-sm">
+                  {t('alerts.pendingReconciliation')}
+                </span>
+                <Badge
+                  variant="outline"
+                  className="border-yellow-500 text-yellow-700"
+                >
+                  {pendingReconciliation}
+                </Badge>
+              </div>
+            )}
+            <div className="flex items-center justify-between rounded-lg bg-blue-50 p-3">
+              <span className="text-sm">{t('alerts.openPeriod')}</span>
+              <Badge
+                variant="outline"
+                className="border-blue-500 text-blue-700"
+              >
+                {currentPeriod}
+              </Badge>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,66 @@
+'use client';
+
+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 '@/app/(app)/(libraries)/core/dashboard/components';
+
+interface CashBalanceKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  kpis?: {
+    saldoCaixa: number;
+  };
+}
+
+export default function CashBalanceKpi({
+  widget,
+  onRemove,
+}: CashBalanceKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-cash-balance',
+    });
+
+  const value = data?.kpis?.saldoCaixa ?? 0;
+  const formatted = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(value);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.cashBalance.title')}
+      onRemove={onRemove}
+    >
+      <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-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-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
+              {formatted}
+            </span>
+            <span className="truncate text-[9px] text-muted-foreground">
+              {t('kpis.cashBalance.description')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,122 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { useTranslations } from 'next-intl';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
+
+interface CashFlowPoint {
+  data: string;
+  saldoPrevisto: number;
+  saldoRealizado: number;
+}
+
+interface FinanceData {
+  fluxoCaixaPrevisto?: CashFlowPoint[];
+}
+
+interface CashFlowChartProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+export default function CashFlowChart({
+  widget,
+  onRemove,
+}: CashFlowChartProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-cash-flow-chart',
+    });
+
+  const chartData = (data?.fluxoCaixaPrevisto || []).map((item) => ({
+    ...item,
+    data: new Date(item.data).toLocaleDateString('pt-BR', {
+      day: '2-digit',
+      month: '2-digit',
+    }),
+  }));
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('cashFlow.title')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full flex flex-col">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base">{t('cashFlow.title')}</CardTitle>
+          <CardDescription>{t('cashFlow.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 pt-0">
+          <div className="h-[280px] w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  dataKey="data"
+                  tick={{ fontSize: 12 }}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <YAxis
+                  tick={{ fontSize: 12 }}
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+                />
+                <Tooltip
+                  formatter={(value: number) =>
+                    new Intl.NumberFormat('pt-BR', {
+                      style: 'currency',
+                      currency: 'BRL',
+                    }).format(value)
+                  }
+                />
+                <Legend />
+                <Line
+                  type="monotone"
+                  dataKey="saldoPrevisto"
+                  name={t('chart.predicted')}
+                  stroke="hsl(var(--primary))"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  type="monotone"
+                  dataKey="saldoRealizado"
+                  name={t('chart.actual')}
+                  stroke="hsl(var(--chart-2))"
+                  strokeWidth={2}
+                  dot={false}
+                  connectNulls
+                />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,63 @@
+'use client';
+
+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 '@/app/(app)/(libraries)/core/dashboard/components';
+
+interface DefaultKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  kpis?: {
+    inadimplencia: number;
+  };
+}
+
+export default function DefaultKpi({ widget, onRemove }: DefaultKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-default',
+    });
+
+  const value = data?.kpis?.inadimplencia ?? 0;
+  const formatted = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(value);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.default.title')}
+      onRemove={onRemove}
+    >
+      <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-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-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
+              {formatted}
+            </span>
+            <span className="truncate text-[9px] text-muted-foreground">
+              {t('kpis.default.description')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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

@@ -0,0 +1,73 @@
+'use client';
+
+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 '@/app/(app)/(libraries)/core/dashboard/components';
+
+interface Payable30dKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  kpis?: {
+    aPagar30dias: number;
+    aPagar7dias: number;
+  };
+}
+
+export default function Payable30dKpi({
+  widget,
+  onRemove,
+}: Payable30dKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-payable-30d',
+    });
+
+  const value = data?.kpis?.aPagar30dias ?? 0;
+  const sevenDays = data?.kpis?.aPagar7dias ?? 0;
+  const formatted = new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(value);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('kpis.payable30.title')}
+      onRemove={onRemove}
+    >
+      <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-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-base font-bold leading-none tracking-tight text-foreground sm:text-lg">
+              {formatted}
+            </span>
+            <span className="truncate text-[9px] text-muted-foreground">
+              {t('kpis.payable30.sevenDays', {
+                value: new Intl.NumberFormat('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                }).format(sevenDays),
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

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>
+  );
+}