@hed-hog/finance 0.0.301 → 0.0.303

package/hedhog/frontend/app/cash-and-banks/statements/page.tsx.ejs

@@ -3,7 +3,6 @@
 import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Dialog,
   DialogContent,
@@ -23,6 +22,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -796,6 +796,7 @@ export default function ExtratosPage() {
       <KpiCardsGrid items={summaryCards} columns={3} />
 
       <FinancePageSection
+        variant="flat"
         title={t('table.title')}
         description={t('table.foundTransactions', { count: extratos.length })}
         contentClassName="p-4 sm:p-5"
@@ -875,15 +876,13 @@ export default function ExtratosPage() {
             </Table>
           </div>
         ) : (
-          <div className="p-2 sm:p-4">
-            <EmptyState
-              icon={<Upload className="h-12 w-12" />}
-              title={t('empty.title')}
-              description={t('empty.description')}
-              actionLabel={t('importDialog.action')}
-              onAction={() => setIsImportSheetOpen(true)}
-            />
-          </div>
+          <EmptyState
+            icon={<Upload className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('importDialog.action')}
+            onAction={() => setIsImportSheetOpen(true)}
+          />
         )}
       </FinancePageSection>
 

package/hedhog/frontend/app/cash-and-banks/transfers/page.tsx.ejs

@@ -3,7 +3,6 @@
 import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { FilterBar } from '@/components/ui/filter-bar';
 import {
   Form,
@@ -15,6 +14,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -407,11 +407,7 @@ export default function TransferenciasPage() {
 
       <KpiCardsGrid items={summaryCards} columns={2} />
 
-      <FinancePageSection
-        title={t('table.title')}
-        description={t('table.description')}
-        contentClassName="p-4 sm:p-5"
-      >
+      <FinancePageSection variant="flat" contentClassName="p-0">
         <div className="overflow-x-auto">
           <Table>
             <TableHeader>

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

@@ -1,372 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-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>
-  );
+export default function FinancePage() {
+  redirect('/finance/reports/cash-position');
 }

package/hedhog/frontend/app/planning/cash-flow-forecast/page.tsx.ejs

@@ -222,82 +222,74 @@ export default function FluxoCaixaPage() {
           <TabsTrigger value="saidas">{t('tabs.expectedOutflows')}</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="entradas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('table.headers.category')}</TableHead>
-                    <TableHead>{t('table.headers.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('table.headers.value')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {entradasPrevistas.map((entrada, i) => (
-                    <TableRow key={i}>
-                      <TableCell className="font-medium">
-                        {entrada.categoria}
-                      </TableCell>
-                      <TableCell>{formatarData(entrada.vencimento)}</TableCell>
-                      <TableCell className="text-right text-green-600 font-semibold">
-                        <Money value={entrada.valor} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                  <TableRow className="bg-muted/50">
-                    <TableCell className="font-bold" colSpan={2}>
-                      {t('table.total')}
-                    </TableCell>
-                    <TableCell className="text-right font-bold text-green-600">
-                      <Money value={totalEntradas} />
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
+        <TabsContent value="entradas">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.category')}</TableHead>
+                <TableHead>{t('table.headers.dueDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {entradasPrevistas.map((entrada, i) => (
+                <TableRow key={i}>
+                  <TableCell className="font-medium">
+                    {entrada.categoria}
+                  </TableCell>
+                  <TableCell>{formatarData(entrada.vencimento)}</TableCell>
+                  <TableCell className="text-right text-green-600 font-semibold">
+                    <Money value={entrada.valor} />
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow className="bg-muted/50">
+                <TableCell className="font-bold" colSpan={2}>
+                  {t('table.total')}
+                </TableCell>
+                <TableCell className="text-right font-bold text-green-600">
+                  <Money value={totalEntradas} />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </TabsContent>
 
-        <TabsContent value="saidas" className="mt-4">
-          <Card>
-            <CardContent className="pt-6">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>{t('table.headers.category')}</TableHead>
-                    <TableHead>{t('table.headers.dueDate')}</TableHead>
-                    <TableHead className="text-right">
-                      {t('table.headers.value')}
-                    </TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {saidasPrevistas.map((saida, i) => (
-                    <TableRow key={i}>
-                      <TableCell className="font-medium">
-                        {saida.categoria}
-                      </TableCell>
-                      <TableCell>{formatarData(saida.vencimento)}</TableCell>
-                      <TableCell className="text-right text-red-600 font-semibold">
-                        <Money value={saida.valor} />
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                  <TableRow className="bg-muted/50">
-                    <TableCell className="font-bold" colSpan={2}>
-                      {t('table.total')}
-                    </TableCell>
-                    <TableCell className="text-right font-bold text-red-600">
-                      <Money value={totalSaidas} />
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
+        <TabsContent value="saidas">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.category')}</TableHead>
+                <TableHead>{t('table.headers.dueDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {saidasPrevistas.map((saida, i) => (
+                <TableRow key={i}>
+                  <TableCell className="font-medium">
+                    {saida.categoria}
+                  </TableCell>
+                  <TableCell>{formatarData(saida.vencimento)}</TableCell>
+                  <TableCell className="text-right text-red-600 font-semibold">
+                    <Money value={saida.valor} />
+                  </TableCell>
+                </TableRow>
+              ))}
+              <TableRow className="bg-muted/50">
+                <TableCell className="font-bold" colSpan={2}>
+                  {t('table.total')}
+                </TableCell>
+                <TableCell className="text-right font-bold text-red-600">
+                  <Money value={totalSaidas} />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
         </TabsContent>
       </Tabs>
     </Page>

package/hedhog/frontend/app/planning/receivables-calendar/page.tsx.ejs

@@ -147,11 +147,7 @@ export default function RecebiveisPage() {
         })}
       </div>
 
-      <FinancePageSection
-        title={t('table.title')}
-        description={t('table.description')}
-        contentClassName="p-4 sm:p-5"
-      >
+      <FinancePageSection variant="flat" contentClassName="p-0">
         <div className="overflow-x-auto">
           <Table>
             <TableHeader>

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

@@ -85,7 +85,7 @@ export default function CenariosPage() {
         ]}
       />
 
-      <FinancePageSection contentClassName="p-4 sm:p-5">
+      <FinancePageSection variant="flat" contentClassName="p-0">
         <div className="grid gap-4 md:grid-cols-3">
           {cenarios.map((cenario) => {
             const isAtivo = cenario.id === cenarioAtivo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.301",
+  "version": "0.0.303",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -12,11 +12,11 @@
     "@hed-hog/api": "0.0.6",
     "@hed-hog/api-pagination": "0.0.7",
     "@hed-hog/api-locale": "0.0.14",
-    "@hed-hog/core": "0.0.301",
+    "@hed-hog/tag": "0.0.303",
     "@hed-hog/api-prisma": "0.0.6",
-    "@hed-hog/tag": "0.0.301",
-    "@hed-hog/api-types": "0.0.1",
-    "@hed-hog/contact": "0.0.301"
+    "@hed-hog/contact": "0.0.303",
+    "@hed-hog/core": "0.0.303",
+    "@hed-hog/api-types": "0.0.1"
   },
   "exports": {
     ".": {