@hed-hog/finance 0.0.223 → 0.0.225

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

@@ -0,0 +1,253 @@
+'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 { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { ArrowRight, Plus } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function NovaTransferenciaSheet({
+  contasBancarias,
+  t,
+}: {
+  contasBancarias: any[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('newTransfer.action')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>{t('newTransfer.title')}</SheetTitle>
+          <SheetDescription>{t('newTransfer.description')}</SheetDescription>
+        </SheetHeader>
+        <form className="mt-6 space-y-4">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="contaOrigem">{t('fields.sourceAccount')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {contasBancarias.map((conta) => (
+                    <SelectItem key={conta.id} value={conta.id}>
+                      {conta.banco} - {conta.descricao}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="contaDestino">
+                {t('fields.destinationAccount')}
+              </Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {contasBancarias.map((conta) => (
+                    <SelectItem key={conta.id} value={conta.id}>
+                      {conta.banco} - {conta.descricao}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="data">{t('fields.date')}</Label>
+                <Input id="data" type="date" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="valor">{t('fields.value')}</Label>
+                <Input
+                  id="valor"
+                  type="number"
+                  placeholder="0,00"
+                  step="0.01"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="descricao">{t('fields.description')}</Label>
+              <Textarea
+                id="descricao"
+                placeholder={t('fields.descriptionPlaceholder')}
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button type="button" variant="outline">
+              {t('common.cancel')}
+            </Button>
+            <Button type="submit">{t('newTransfer.submit')}</Button>
+          </div>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function TransferenciasPage() {
+  const t = useTranslations('finance.TransfersPage');
+  const { data } = useFinanceData();
+  const { transferencias, contasBancarias } = data;
+
+  const totalTransferido = transferencias.reduce((acc, t) => acc + t.valor, 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') },
+        ]}
+        actions={
+          <NovaTransferenciaSheet contasBancarias={contasBancarias} t={t} />
+        }
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalTransferred')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalTransferido} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.transferCount', { count: transferencias.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.activeAccounts')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {contasBancarias.filter((c) => c.ativo).length}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.available')}
+            </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.date')}</TableHead>
+                <TableHead>{t('table.headers.source')}</TableHead>
+                <TableHead className="text-center">→</TableHead>
+                <TableHead>{t('table.headers.destination')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+                <TableHead>{t('table.headers.description')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {transferencias.map((transferencia) => {
+                const contaOrigem = contasBancarias.find(
+                  (conta) => conta.id === transferencia.contaOrigemId
+                );
+                const contaDestino = contasBancarias.find(
+                  (conta) => conta.id === transferencia.contaDestinoId
+                );
+
+                return (
+                  <TableRow key={transferencia.id}>
+                    <TableCell>{formatarData(transferencia.data)}</TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{contaOrigem?.banco}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {contaOrigem?.descricao}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-center">
+                      <ArrowRight className="h-4 w-4 text-muted-foreground mx-auto" />
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{contaDestino?.banco}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {contaDestino?.descricao}
+                        </p>
+                      </div>
+                    </TableCell>
+                    <TableCell className="text-right font-semibold">
+                      <Money value={transferencia.valor} />
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {transferencia.descricao}
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

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

@@ -1,17 +1,338 @@
-import { PageHeader } from '@/components/entity-list';
-import { useTranslations } from 'next-intl';
-
-export const Page = () => {
-  const t = useTranslations('finance.Home');
-
-  return (
-    <div className="flex flex-col h-screen px-4">
-      <PageHeader
-        breadcrumbs={[{ label: 'Home', href: '/' }, { label: t('title') }]}
-        title={t('title')}
-        description={t('description')}
-      />
-      Finance
-    </div>
-  );
-};
+'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 { useTranslations } from 'next-intl';
+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,
+          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,
+          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) => (
+              <div key={i} className="flex items-center justify-between">
+                <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} />
+              </div>
+            ))}
+          </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) => (
+              <div key={i} className="flex items-center justify-between">
+                <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} />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function Alertas({
+  titulosPagar,
+  extratos,
+  t,
+}: {
+  titulosPagar: any[];
+  extratos: any[];
+  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;
+
+  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">
+              {t('alerts.currentPeriod')}
+            </Badge>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function DashboardPage() {
+  const t = useTranslations('finance.DashboardPage');
+  const { data } = useFinanceData();
+  const {
+    kpis,
+    fluxoCaixaPrevisto,
+    titulosPagar,
+    titulosReceber,
+    extratos,
+    pessoas,
+  } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  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={titulosPagar} extratos={extratos} t={t} />
+      </div>
+
+      <ProximosVencimentos
+        titulosPagar={titulosPagar}
+        titulosReceber={titulosReceber}
+        getPessoaById={getPessoaById}
+        t={t}
+      />
+    </Page>
+  );
+}