@hed-hog/finance 0.0.274 → 0.0.276

package/hedhog/frontend/app/page.tsx.ejs

@@ -1,372 +1,372 @@
-'use client';
-
-import { Page, PageHeader } from '@/components/entity-list';
-import { Badge } from '@/components/ui/badge';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { KpiCard } from '@/components/ui/kpi-card';
-import { Money } from '@/components/ui/money';
-import { StatusBadge } from '@/components/ui/status-badge';
-import {
-  AlertTriangle,
-  ArrowDownRight,
-  ArrowUpRight,
-  TrendingDown,
-  TrendingUp,
-  Wallet,
-} from 'lucide-react';
-import { useLocale, useTranslations } from 'next-intl';
-import Link from 'next/link';
-import {
-  CartesianGrid,
-  Legend,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { formatarData, formatarMoeda } from './_lib/formatters';
-import { useFinanceData } from './_lib/use-finance-data';
-
-function DashboardChart({
-  fluxoCaixaPrevisto,
-  t,
-}: {
-  fluxoCaixaPrevisto: any[];
-  t: ReturnType<typeof useTranslations>;
-}) {
-  const chartData = fluxoCaixaPrevisto.map((item) => ({
-    ...item,
-    data: formatarData(item.data),
-  }));
-
-  return (
-    <ResponsiveContainer width="100%" height={300}>
-      <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) => formatarMoeda(value)}
-          contentStyle={{
-            backgroundColor: 'hsl(var(--background))',
-            border: '1px solid hsl(var(--border))',
-            borderRadius: '8px',
-          }}
-        />
-        <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>
-  );
-}
-
-function ProximosVencimentos({
-  titulosPagar,
-  titulosReceber,
-  getPessoaById,
-  t,
-}: {
-  titulosPagar: any[];
-  titulosReceber: any[];
-  getPessoaById: (id?: string) => any | undefined;
-  t: ReturnType<typeof useTranslations>;
-}) {
-  const vencimentosPagar = titulosPagar
-    .flatMap((t: any) =>
-      t.parcelas
-        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
-        .map((p: any) => ({
-          tipo: 'pagar' as const,
-          tituloId: t.id,
-          documento: t.documento,
-          pessoa: getPessoaById(t.fornecedorId)?.nome || '',
-          vencimento: p.vencimento,
-          valor: p.valor,
-          status: p.status,
-        }))
-    )
-    .slice(0, 3);
-
-  const vencimentosReceber = titulosReceber
-    .flatMap((t: any) =>
-      t.parcelas
-        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
-        .map((p: any) => ({
-          tipo: 'receber' as const,
-          tituloId: t.id,
-          documento: t.documento,
-          pessoa: getPessoaById(t.clienteId)?.nome || '',
-          vencimento: p.vencimento,
-          valor: p.valor,
-          status: p.status,
-        }))
-    )
-    .slice(0, 3);
-
-  return (
-    <div className="grid gap-6 lg:grid-cols-2">
-      <Card>
-        <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">
-            {vencimentosPagar.map((item, i) => (
-              <Link
-                key={i}
-                href={`/finance/accounts-payable/installments/${item.tituloId}`}
-                className="flex items-center justify-between rounded-md p-2 -m-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.pessoa}</p>
-                </div>
-                <div className="text-right">
-                  <p className="text-sm font-medium">
-                    <Money value={item.valor} />
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {formatarData(item.vencimento)}
-                  </p>
-                </div>
-                <StatusBadge status={item.status} />
-              </Link>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card>
-        <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">
-            {vencimentosReceber.map((item, i) => (
-              <Link
-                key={i}
-                href={`/finance/accounts-receivable/installments/${item.tituloId}`}
-                className="flex items-center justify-between rounded-md p-2 -m-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.pessoa}</p>
-                </div>
-                <div className="text-right">
-                  <p className="text-sm font-medium">
-                    <Money value={item.valor} />
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    {formatarData(item.vencimento)}
-                  </p>
-                </div>
-                <StatusBadge status={item.status} />
-              </Link>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function Alertas({
-  titulosPagar,
-  extratos,
-  periodoAberto,
-  locale,
-  t,
-}: {
-  titulosPagar: any[];
-  extratos: any[];
-  periodoAberto?: { inicio?: string | null } | null;
-  locale: string;
-  t: ReturnType<typeof useTranslations>;
-}) {
-  const vencidos = titulosPagar.filter((t) =>
-    t.parcelas.some((p: any) => p.status === 'vencido')
-  ).length;
-  const pendenteConciliacao = extratos.filter(
-    (e) => e.statusConciliacao === 'pendente'
-  ).length;
-
-  const periodoBase = periodoAberto?.inicio
-    ? new Date(periodoAberto.inicio)
-    : new Date();
-  const mes = new Intl.DateTimeFormat(locale, { month: 'long' }).format(
-    periodoBase
-  );
-  const periodoAtual = `${mes.charAt(0).toUpperCase()}${mes.slice(1)}/${periodoBase.getFullYear()}`;
-
-  return (
-    <Card>
-      <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">
-          {vencidos > 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">{vencidos}</Badge>
-            </div>
-          )}
-          {pendenteConciliacao > 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"
-              >
-                {pendenteConciliacao}
-              </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">
-              {periodoAtual}
-            </Badge>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function DashboardPage() {
-  const t = useTranslations('finance.DashboardPage');
-  const locale = useLocale();
-  const { data } = useFinanceData();
-  const {
-    kpis,
-    fluxoCaixaPrevisto,
-    titulosPagar,
-    titulosReceber,
-    extratos,
-    pessoas,
-    periodoAberto,
-  } = data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-  const titulosPagarAprovados = titulosPagar.filter(
-    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
-  );
-
-  return (
-    <Page>
-      <PageHeader
-        title={t('header.title')}
-        description={t('header.description')}
-        breadcrumbs={[
-          { label: t('breadcrumbs.home'), href: '/' },
-          { label: t('breadcrumbs.finance') },
-        ]}
-      />
-
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <KpiCard
-          title={t('kpis.cashBalance.title')}
-          value={formatarMoeda(kpis.saldoCaixa)}
-          icon={Wallet}
-          description={t('kpis.cashBalance.description')}
-        />
-        <KpiCard
-          title={t('kpis.payable30.title')}
-          value={formatarMoeda(kpis.aPagar30dias)}
-          icon={TrendingDown}
-          description={t('kpis.payable30.sevenDays', {
-            value: formatarMoeda(kpis.aPagar7dias),
-          })}
-        />
-        <KpiCard
-          title={t('kpis.receivable30.title')}
-          value={formatarMoeda(kpis.aReceber30dias)}
-          icon={TrendingUp}
-          description={t('kpis.receivable30.sevenDays', {
-            value: formatarMoeda(kpis.aReceber7dias),
-          })}
-        />
-        <KpiCard
-          title={t('kpis.default.title')}
-          value={formatarMoeda(kpis.inadimplencia)}
-          icon={AlertTriangle}
-          description={t('kpis.default.description')}
-        />
-      </div>
-
-      <div className="grid gap-6 lg:grid-cols-3">
-        <Card className="lg:col-span-2">
-          <CardHeader>
-            <CardTitle>{t('cashFlow.title')}</CardTitle>
-            <CardDescription>{t('cashFlow.description')}</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <DashboardChart fluxoCaixaPrevisto={fluxoCaixaPrevisto} t={t} />
-          </CardContent>
-        </Card>
-        <Alertas
-          titulosPagar={titulosPagarAprovados}
-          extratos={extratos}
-          periodoAberto={periodoAberto}
-          locale={locale}
-          t={t}
-        />
-      </div>
-
-      <ProximosVencimentos
-        titulosPagar={titulosPagarAprovados}
-        titulosReceber={titulosReceber}
-        getPessoaById={getPessoaById}
-        t={t}
-      />
-    </Page>
-  );
-}
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { KpiCard } from '@/components/ui/kpi-card';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  AlertTriangle,
+  ArrowDownRight,
+  ArrowUpRight,
+  TrendingDown,
+  TrendingUp,
+  Wallet,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import Link from 'next/link';
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatarData, formatarMoeda } from './_lib/formatters';
+import { useFinanceData } from './_lib/use-finance-data';
+
+function DashboardChart({
+  fluxoCaixaPrevisto,
+  t,
+}: {
+  fluxoCaixaPrevisto: any[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const chartData = fluxoCaixaPrevisto.map((item) => ({
+    ...item,
+    data: formatarData(item.data),
+  }));
+
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <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) => formatarMoeda(value)}
+          contentStyle={{
+            backgroundColor: 'hsl(var(--background))',
+            border: '1px solid hsl(var(--border))',
+            borderRadius: '8px',
+          }}
+        />
+        <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>
+  );
+}
+
+function ProximosVencimentos({
+  titulosPagar,
+  titulosReceber,
+  getPessoaById,
+  t,
+}: {
+  titulosPagar: any[];
+  titulosReceber: any[];
+  getPessoaById: (id?: string) => any | undefined;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const vencimentosPagar = titulosPagar
+    .flatMap((t: any) =>
+      t.parcelas
+        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
+        .map((p: any) => ({
+          tipo: 'pagar' as const,
+          tituloId: t.id,
+          documento: t.documento,
+          pessoa: getPessoaById(t.fornecedorId)?.nome || '',
+          vencimento: p.vencimento,
+          valor: p.valor,
+          status: p.status,
+        }))
+    )
+    .slice(0, 3);
+
+  const vencimentosReceber = titulosReceber
+    .flatMap((t: any) =>
+      t.parcelas
+        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
+        .map((p: any) => ({
+          tipo: 'receber' as const,
+          tituloId: t.id,
+          documento: t.documento,
+          pessoa: getPessoaById(t.clienteId)?.nome || '',
+          vencimento: p.vencimento,
+          valor: p.valor,
+          status: p.status,
+        }))
+    )
+    .slice(0, 3);
+
+  return (
+    <div className="grid gap-6 lg:grid-cols-2">
+      <Card>
+        <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">
+            {vencimentosPagar.map((item, i) => (
+              <Link
+                key={i}
+                href={`/finance/accounts-payable/installments/${item.tituloId}`}
+                className="flex items-center justify-between rounded-md p-2 -m-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.pessoa}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.valor} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatarData(item.vencimento)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <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">
+            {vencimentosReceber.map((item, i) => (
+              <Link
+                key={i}
+                href={`/finance/accounts-receivable/installments/${item.tituloId}`}
+                className="flex items-center justify-between rounded-md p-2 -m-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.pessoa}</p>
+                </div>
+                <div className="text-right">
+                  <p className="text-sm font-medium">
+                    <Money value={item.valor} />
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {formatarData(item.vencimento)}
+                  </p>
+                </div>
+                <StatusBadge status={item.status} />
+              </Link>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function Alertas({
+  titulosPagar,
+  extratos,
+  periodoAberto,
+  locale,
+  t,
+}: {
+  titulosPagar: any[];
+  extratos: any[];
+  periodoAberto?: { inicio?: string | null } | null;
+  locale: string;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const vencidos = titulosPagar.filter((t) =>
+    t.parcelas.some((p: any) => p.status === 'vencido')
+  ).length;
+  const pendenteConciliacao = extratos.filter(
+    (e) => e.statusConciliacao === 'pendente'
+  ).length;
+
+  const periodoBase = periodoAberto?.inicio
+    ? new Date(periodoAberto.inicio)
+    : new Date();
+  const mes = new Intl.DateTimeFormat(locale, { month: 'long' }).format(
+    periodoBase
+  );
+  const periodoAtual = `${mes.charAt(0).toUpperCase()}${mes.slice(1)}/${periodoBase.getFullYear()}`;
+
+  return (
+    <Card>
+      <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">
+          {vencidos > 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">{vencidos}</Badge>
+            </div>
+          )}
+          {pendenteConciliacao > 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"
+              >
+                {pendenteConciliacao}
+              </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">
+              {periodoAtual}
+            </Badge>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function DashboardPage() {
+  const t = useTranslations('finance.DashboardPage');
+  const locale = useLocale();
+  const { data } = useFinanceData();
+  const {
+    kpis,
+    fluxoCaixaPrevisto,
+    titulosPagar,
+    titulosReceber,
+    extratos,
+    pessoas,
+    periodoAberto,
+  } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+  const titulosPagarAprovados = titulosPagar.filter(
+    (titulo) => titulo.status !== 'rascunho' && titulo.status !== 'cancelado'
+  );
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <KpiCard
+          title={t('kpis.cashBalance.title')}
+          value={formatarMoeda(kpis.saldoCaixa)}
+          icon={Wallet}
+          description={t('kpis.cashBalance.description')}
+        />
+        <KpiCard
+          title={t('kpis.payable30.title')}
+          value={formatarMoeda(kpis.aPagar30dias)}
+          icon={TrendingDown}
+          description={t('kpis.payable30.sevenDays', {
+            value: formatarMoeda(kpis.aPagar7dias),
+          })}
+        />
+        <KpiCard
+          title={t('kpis.receivable30.title')}
+          value={formatarMoeda(kpis.aReceber30dias)}
+          icon={TrendingUp}
+          description={t('kpis.receivable30.sevenDays', {
+            value: formatarMoeda(kpis.aReceber7dias),
+          })}
+        />
+        <KpiCard
+          title={t('kpis.default.title')}
+          value={formatarMoeda(kpis.inadimplencia)}
+          icon={AlertTriangle}
+          description={t('kpis.default.description')}
+        />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>{t('cashFlow.title')}</CardTitle>
+            <CardDescription>{t('cashFlow.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DashboardChart fluxoCaixaPrevisto={fluxoCaixaPrevisto} t={t} />
+          </CardContent>
+        </Card>
+        <Alertas
+          titulosPagar={titulosPagarAprovados}
+          extratos={extratos}
+          periodoAberto={periodoAberto}
+          locale={locale}
+          t={t}
+        />
+      </div>
+
+      <ProximosVencimentos
+        titulosPagar={titulosPagarAprovados}
+        titulosReceber={titulosReceber}
+        getPessoaById={getPessoaById}
+        t={t}
+      />
+    </Page>
+  );
+}