@hed-hog/core 0.0.297 → 0.0.299

package/hedhog/frontend/app/dashboard/components/widgets/finance.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 '../widget-wrapper';
+
+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 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" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('kpis.cashBalance.title')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+              {formatted}
+            </span>
+            <span className="text-[10px] text-muted-foreground">
+              {t('kpis.cashBalance.description')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.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 '../widget-wrapper';
+
+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/app/dashboard/components/widgets/finance.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 '../widget-wrapper';
+
+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 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" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('kpis.default.title')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+              {formatted}
+            </span>
+            <span className="text-[10px] text-muted-foreground">
+              {t('kpis.default.description')}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.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 '../widget-wrapper';
+
+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 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" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('kpis.payable30.title')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+              {formatted}
+            </span>
+            <span className="text-[10px] 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/app/dashboard/components/widgets/finance.receivable-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 { TrendingUp } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface Receivable30dKpiProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+interface FinanceData {
+  kpis?: {
+    aReceber30dias: number;
+    aReceber7dias: number;
+  };
+}
+
+export default function Receivable30dKpi({
+  widget,
+  onRemove,
+}: Receivable30dKpiProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-kpi-receivable-30d',
+    });
+
+  const value = data?.kpis?.aReceber30dias ?? 0;
+  const sevenDays = data?.kpis?.aReceber7dias ?? 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.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" />
+          </div>
+          <div className="flex min-w-0 flex-col">
+            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+              {t('kpis.receivable30.title')}
+            </span>
+            <span className="truncate text-lg font-bold tracking-tight text-foreground">
+              {formatted}
+            </span>
+            <span className="text-[10px] text-muted-foreground">
+              {t('kpis.receivable30.sevenDays', {
+                value: new Intl.NumberFormat('pt-BR', {
+                  style: 'currency',
+                  currency: 'BRL',
+                }).format(sevenDays),
+              })}
+            </span>
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.upcoming-payable.tsx.ejs

@@ -0,0 +1,123 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ArrowDownRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface FinanceData {
+  titulosPagar?: Array<{
+    id: string;
+    status: string;
+    documento: string;
+    fornecedorId?: string;
+    parcelas: Array<{
+      status: string;
+      vencimento: string;
+      valor: number;
+    }>;
+  }>;
+  pessoas?: Array<{
+    id: string;
+    nome: string;
+  }>;
+}
+
+interface UpcomingPayableProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleDateString('pt-BR');
+}
+
+export default function UpcomingPayable({
+  widget,
+  onRemove,
+}: UpcomingPayableProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-upcoming-payable',
+    });
+
+  const getPersonById = (id?: string) =>
+    (data?.pessoas || []).find((p) => p.id === id);
+
+  const approvedPayables = (data?.titulosPagar || []).filter(
+    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
+  );
+
+  const rows = approvedPayables
+    .flatMap((titulo) =>
+      titulo.parcelas
+        .filter((p) => p.status === 'aberto' || p.status === 'vencido')
+        .map((parcela) => ({
+          tituloId: titulo.id,
+          documento: titulo.documento,
+          person: getPersonById(titulo.fornecedorId)?.nome || '',
+          dueDate: parcela.vencimento,
+          value: parcela.valor,
+          status: parcela.status,
+        }))
+    )
+    .slice(0, 3);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('upcoming.payable')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ArrowDownRight className="h-4 w-4 text-red-500" />
+            {t('upcoming.payable')}
+          </CardTitle>
+          <CardDescription>{t('upcoming.nextDueDates')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {rows.map((item, index) => (
+              <Link
+                key={index}
+                href={`/finance/accounts-payable/installments/${item.tituloId}`}
+                className="-m-2 flex cursor-pointer items-center justify-between rounded-md p-2 transition-colors hover:bg-muted/50 active:bg-muted"
+              >
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">{item.documento}</p>
+                  <p className="text-xs text-muted-foreground">{item.person}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.value} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatDate(item.dueDate)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status as any} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}

package/hedhog/frontend/app/dashboard/components/widgets/finance.upcoming-receivable.tsx.ejs

@@ -0,0 +1,118 @@
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { useWidgetData } from '@/hooks/use-widget-data';
+import { ArrowUpRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { WidgetWrapper } from '../widget-wrapper';
+
+interface FinanceData {
+  titulosReceber?: Array<{
+    id: string;
+    documento: string;
+    clienteId?: string;
+    parcelas: Array<{
+      status: string;
+      vencimento: string;
+      valor: number;
+    }>;
+  }>;
+  pessoas?: Array<{
+    id: string;
+    nome: string;
+  }>;
+}
+
+interface UpcomingReceivableProps {
+  widget?: { name?: string };
+  onRemove?: () => void;
+}
+
+function formatDate(value: string) {
+  return new Date(value).toLocaleDateString('pt-BR');
+}
+
+export default function UpcomingReceivable({
+  widget,
+  onRemove,
+}: UpcomingReceivableProps) {
+  const t = useTranslations('finance.DashboardPage');
+
+  const { data, isLoading, isAccessDenied, isError } =
+    useWidgetData<FinanceData>({
+      endpoint: '/finance/data',
+      queryKey: 'finance-upcoming-receivable',
+    });
+
+  const getPersonById = (id?: string) =>
+    (data?.pessoas || []).find((p) => p.id === id);
+
+  const rows = (data?.titulosReceber || [])
+    .flatMap((titulo) =>
+      titulo.parcelas
+        .filter((p) => p.status === 'aberto' || p.status === 'vencido')
+        .map((parcela) => ({
+          tituloId: titulo.id,
+          documento: titulo.documento,
+          person: getPersonById(titulo.clienteId)?.nome || '',
+          dueDate: parcela.vencimento,
+          value: parcela.valor,
+          status: parcela.status,
+        }))
+    )
+    .slice(0, 3);
+
+  return (
+    <WidgetWrapper
+      isLoading={isLoading}
+      isAccessDenied={isAccessDenied}
+      isError={isError}
+      widgetName={widget?.name || t('upcoming.receivable')}
+      onRemove={onRemove}
+    >
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ArrowUpRight className="h-4 w-4 text-green-500" />
+            {t('upcoming.receivable')}
+          </CardTitle>
+          <CardDescription>{t('upcoming.nextDueDates')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {rows.map((item, index) => (
+              <Link
+                key={index}
+                href={`/finance/accounts-receivable/installments/${item.tituloId}`}
+                className="-m-2 flex cursor-pointer items-center justify-between rounded-md p-2 transition-colors hover:bg-muted/50 active:bg-muted"
+              >
+                <div className="space-y-1">
+                  <p className="text-sm font-medium">{item.documento}</p>
+                  <p className="text-xs text-muted-foreground">{item.person}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.value} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatDate(item.dueDate)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status as any} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </WidgetWrapper>
+  );
+}