@hed-hog/finance 0.0.223 → 0.0.225

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

@@ -0,0 +1,298 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Download, TrendingDown, TrendingUp, Wallet } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { formatarData, formatarMoeda } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+export default function FluxoCaixaPage() {
+  const t = useTranslations('finance.CashFlowForecastPage');
+  const { data } = useFinanceData();
+  const { fluxoCaixaPrevisto, kpis, entradasPrevistas, saidasPrevistas } = data;
+
+  const [horizonte, setHorizonte] = useState('90');
+  const [cenario, setCenario] = useState('base');
+
+  const chartData = fluxoCaixaPrevisto.map((item) => ({
+    ...item,
+    data: formatarData(item.data),
+  }));
+
+  const totalEntradas = entradasPrevistas.reduce((acc, e) => acc + e.valor, 0);
+  const totalSaidas = saidasPrevistas.reduce((acc, s) => acc + s.valor, 0);
+  const saldoFinal = kpis.saldoCaixa + totalEntradas - totalSaidas;
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        actions={
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            {t('actions.export')}
+          </Button>
+        }
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Select value={horizonte} onValueChange={setHorizonte}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder={t('filters.horizon')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="30">{t('filters.days30')}</SelectItem>
+            <SelectItem value="60">{t('filters.days60')}</SelectItem>
+            <SelectItem value="90">{t('filters.days90')}</SelectItem>
+            <SelectItem value="180">{t('filters.days180')}</SelectItem>
+            <SelectItem value="365">{t('filters.days365')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={cenario} onValueChange={setCenario}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder={t('filters.scenario')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="base">{t('scenarios.base')}</SelectItem>
+            <SelectItem value="pessimista">
+              {t('scenarios.pessimistic')}
+            </SelectItem>
+            <SelectItem value="otimista">
+              {t('scenarios.optimistic')}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.currentBalance')}
+            </CardTitle>
+            <Wallet className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={kpis.saldoCaixa} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.expectedInflows')}
+            </CardTitle>
+            <TrendingUp className="h-4 w-4 text-green-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totalEntradas} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.expectedOutflows')}
+            </CardTitle>
+            <TrendingDown className="h-4 w-4 text-red-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              <Money value={totalSaidas} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.projectedBalance')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div
+              className={`text-2xl font-bold ${saldoFinal >= 0 ? 'text-green-600' : 'text-red-600'}`}
+            >
+              <Money value={saldoFinal} />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('projection.title')}</CardTitle>
+          <CardDescription>{t('projection.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ResponsiveContainer width="100%" height={350}>
+            <AreaChart data={chartData}>
+              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+              <XAxis dataKey="data" tick={{ fontSize: 12 }} />
+              <YAxis
+                tick={{ fontSize: 12 }}
+                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 />
+              <Area
+                type="monotone"
+                dataKey="saldoPrevisto"
+                name={t('projection.predictedBalance')}
+                stroke="hsl(var(--primary))"
+                fill="hsl(var(--primary))"
+                fillOpacity={0.2}
+              />
+              <Area
+                type="monotone"
+                dataKey="saldoRealizado"
+                name={t('projection.actualBalance')}
+                stroke="hsl(var(--chart-2))"
+                fill="hsl(var(--chart-2))"
+                fillOpacity={0.2}
+                connectNulls
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </CardContent>
+      </Card>
+
+      <Tabs defaultValue="entradas">
+        <TabsList>
+          <TabsTrigger value="entradas">
+            {t('tabs.expectedInflows')}
+          </TabsTrigger>
+          <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>
+
+        <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>
+      </Tabs>
+    </Page>
+  );
+}

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

@@ -0,0 +1,225 @@
+'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 { Money } from '@/components/ui/money';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Building2, CalendarDays, CreditCard, Smartphone } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+export default function RecebiveisPage() {
+  const t = useTranslations('finance.ReceivablesCalendarPage');
+  const { data } = useFinanceData();
+  const { recebiveis, adquirentes } = data;
+
+  const statusConfig = {
+    confirmado: {
+      label: t('status.confirmado'),
+      className: 'bg-green-100 text-green-700',
+    },
+    pendente: {
+      label: t('status.pendente'),
+      className: 'bg-yellow-100 text-yellow-700',
+    },
+    liquidado: {
+      label: t('status.liquidado'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+  };
+
+  const totalBruto = recebiveis.reduce((acc, r) => acc + r.bruto, 0);
+  const totalTaxas = recebiveis.reduce((acc, r) => acc + r.taxas, 0);
+  const totalLiquido = recebiveis.reduce((acc, r) => acc + r.liquido, 0);
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalGross')}
+            </CardTitle>
+            <CalendarDays className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalBruto} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.receivablesCount', { count: recebiveis.length })}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.fees')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              - <Money value={totalTaxas} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.percentOfGross', {
+                percent: ((totalTaxas / totalBruto) * 100).toFixed(2),
+              })}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalNet')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totalLiquido} />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.confirmed')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {recebiveis.filter((r) => r.status === 'confirmado').length}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.ofTotal', { total: recebiveis.length })}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        {adquirentes.map((adquirente) => {
+          const Icon =
+            adquirente.nome === 'PagSeguro'
+              ? Smartphone
+              : adquirente.nome === 'Cielo'
+                ? CreditCard
+                : Building2;
+          return (
+            <Card key={adquirente.nome}>
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-base">
+                      {adquirente.nome}
+                    </CardTitle>
+                    <CardDescription>
+                      {t('acquirers.transactions', {
+                        count: adquirente.transacoes,
+                      })}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="text-2xl font-bold">
+                  <Money value={adquirente.total} />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  {t('acquirers.toReceive')}
+                </p>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.channel')}</TableHead>
+                <TableHead>{t('table.headers.acquirer')}</TableHead>
+                <TableHead>{t('table.headers.expectedDate')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.gross')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.fees')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.net')}
+                </TableHead>
+                <TableHead>{t('table.headers.status')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {recebiveis.map((recebivel) => {
+                const status =
+                  statusConfig[recebivel.status as keyof typeof statusConfig];
+                return (
+                  <TableRow key={recebivel.id}>
+                    <TableCell className="font-medium">
+                      {recebivel.canal}
+                    </TableCell>
+                    <TableCell>{recebivel.adquirente}</TableCell>
+                    <TableCell>
+                      {formatarData(recebivel.dataPrevista)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Money value={recebivel.bruto} />
+                    </TableCell>
+                    <TableCell className="text-right text-red-600">
+                      - <Money value={recebivel.taxas} />
+                    </TableCell>
+                    <TableCell className="text-right font-semibold">
+                      <Money value={recebivel.liquido} />
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={status.className} variant="outline">
+                        {status.label}
+                      </Badge>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}