@hed-hog/finance 0.0.223 → 0.0.225

package/hedhog/data/route.yaml

@@ -1,5 +1,59 @@
-- url: /finance
+- url: /finance/data
   method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-payable/installments
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-payable/installments/:id
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-payable/installments
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-receivable/installments
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-receivable/installments/:id
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
+      - where:
+          slug: admin-finance
+
+- url: /finance/accounts-receivable/installments
+  method: POST
   relations:
     role:
       - where:

package/hedhog/frontend/app/_lib/formatters.ts.ejs

@@ -0,0 +1,20 @@
+export function formatarData(value?: string | Date | null) {
+  if (!value) {
+    return '-';
+  }
+
+  const date = value instanceof Date ? value : new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return String(value);
+  }
+
+  return new Intl.DateTimeFormat('pt-BR').format(date);
+}
+
+export function formatarMoeda(value?: number | null) {
+  return new Intl.NumberFormat('pt-BR', {
+    style: 'currency',
+    currency: 'BRL',
+  }).format(value || 0);
+}

package/hedhog/frontend/app/_lib/use-finance-data.ts.ejs

@@ -0,0 +1,87 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+type FinanceData = {
+  kpis: {
+    saldoCaixa: number;
+    aPagar30dias: number;
+    aPagar7dias: number;
+    aReceber30dias: number;
+    aReceber7dias: number;
+    inadimplencia: number;
+  };
+  fluxoCaixaPrevisto: any[];
+  titulosPagar: any[];
+  titulosReceber: any[];
+  extratos: any[];
+  contasBancarias: any[];
+  pessoas: any[];
+  categorias: any[];
+  centrosCusto: any[];
+  aprovacoesPendentes: any[];
+  agingInadimplencia: any[];
+  cenarios: any[];
+  transferencias: any[];
+  tags: any[];
+  logsAuditoria: any[];
+  recebiveis: any[];
+  adquirentes: any[];
+  historicoContatos: any[];
+  entradasPrevistas: any[];
+  saidasPrevistas: any[];
+};
+
+const EMPTY_FINANCE_DATA: FinanceData = {
+  kpis: {
+    saldoCaixa: 0,
+    aPagar30dias: 0,
+    aPagar7dias: 0,
+    aReceber30dias: 0,
+    aReceber7dias: 0,
+    inadimplencia: 0,
+  },
+  fluxoCaixaPrevisto: [],
+  titulosPagar: [],
+  titulosReceber: [],
+  extratos: [],
+  contasBancarias: [],
+  pessoas: [],
+  categorias: [],
+  centrosCusto: [],
+  aprovacoesPendentes: [],
+  agingInadimplencia: [],
+  cenarios: [],
+  transferencias: [],
+  tags: [],
+  logsAuditoria: [],
+  recebiveis: [],
+  adquirentes: [],
+  historicoContatos: [],
+  entradasPrevistas: [],
+  saidasPrevistas: [],
+};
+
+export function useFinanceData() {
+  const { request } = useApp();
+
+  return useQuery<FinanceData>({
+    queryKey: ['finance-data'],
+    queryFn: async () => {
+      try {
+        const response = await request({
+          url: '/finance/data',
+          method: 'GET',
+        });
+
+        return {
+          ...EMPTY_FINANCE_DATA,
+          ...(response?.data || {}),
+        } as FinanceData;
+      } catch {
+        return EMPTY_FINANCE_DATA;
+      }
+    },
+    initialData: EMPTY_FINANCE_DATA,
+  });
+}

package/hedhog/frontend/app/accounts-payable/approvals/page.tsx.ejs

@@ -0,0 +1,290 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function AprovacaoDialog({
+  tipo,
+  onConfirm,
+  t,
+}: {
+  tipo: 'aprovar' | 'reprovar';
+  onConfirm: () => void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const isAprovar = tipo === 'aprovar';
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant={isAprovar ? 'default' : 'outline'} size="sm">
+          {isAprovar ? (
+            <>
+              <CheckCircle className="mr-2 h-4 w-4" />
+              {t('dialog.approveAction')}
+            </>
+          ) : (
+            <>
+              <XCircle className="mr-2 h-4 w-4" />
+              {t('dialog.rejectAction')}
+            </>
+          )}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isAprovar ? t('dialog.approveTitle') : t('dialog.rejectTitle')}
+          </DialogTitle>
+          <DialogDescription>
+            {isAprovar
+              ? t('dialog.approveDescription')
+              : t('dialog.rejectDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="comentario">{t('dialog.comment')}</Label>
+            <Textarea
+              id="comentario"
+              placeholder={
+                isAprovar
+                  ? t('dialog.optionalCommentPlaceholder')
+                  : t('dialog.rejectReasonPlaceholder')
+              }
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">{t('dialog.cancel')}</Button>
+          <Button
+            variant={isAprovar ? 'default' : 'destructive'}
+            onClick={onConfirm}
+          >
+            {isAprovar ? t('dialog.confirmApprove') : t('dialog.confirmReject')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function AprovacoesPage() {
+  const t = useTranslations('finance.PayableApprovalsPage');
+  const { data } = useFinanceData();
+  const { aprovacoesPendentes, titulosPagar, pessoas } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const [aprovacoes, setAprovacoes] = useState(aprovacoesPendentes);
+
+  useEffect(() => {
+    setAprovacoes(aprovacoesPendentes);
+  }, [aprovacoesPendentes]);
+
+  const handleAprovacao = (id: string) => {
+    setAprovacoes(aprovacoes.filter((a) => a.id !== id));
+  };
+
+  const urgenciaConfig = {
+    baixa: {
+      label: t('urgency.low'),
+      className: 'bg-slate-100 text-slate-700',
+    },
+    media: {
+      label: t('urgency.medium'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+    alta: {
+      label: t('urgency.high'),
+      className: 'bg-orange-100 text-orange-700',
+    },
+    critica: {
+      label: t('urgency.critical'),
+      className: 'bg-red-100 text-red-700',
+    },
+  };
+
+  const totalPendente = aprovacoes.reduce((acc, a) => acc + a.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') },
+        ]}
+      />
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.pending')}
+            </CardTitle>
+            <Clock className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{aprovacoes.length}</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.totalValue')}
+            </CardTitle>
+            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={totalPendente} />
+            </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.urgent')}
+            </CardTitle>
+            <AlertTriangle className="h-4 w-4 text-orange-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {
+                aprovacoes.filter(
+                  (a) => a.urgencia === 'alta' || a.urgencia === 'critica'
+                ).length
+              }
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {aprovacoes.length > 0 ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t('table.headers.document')}</TableHead>
+                  <TableHead>{t('table.headers.supplier')}</TableHead>
+                  <TableHead>{t('table.headers.requester')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.headers.value')}
+                  </TableHead>
+                  <TableHead>{t('table.headers.policy')}</TableHead>
+                  <TableHead>{t('table.headers.urgency')}</TableHead>
+                  <TableHead>{t('table.headers.date')}</TableHead>
+                  <TableHead className="text-right">
+                    {t('table.headers.actions')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {aprovacoes.map((aprovacao) => {
+                  const titulo = titulosPagar.find(
+                    (t) => t.id === aprovacao.tituloId
+                  );
+                  const fornecedor = titulo
+                    ? getPessoaById(titulo.fornecedorId)
+                    : null;
+                  const urgencia =
+                    urgenciaConfig[
+                      aprovacao.urgencia as keyof typeof urgenciaConfig
+                    ] || urgenciaConfig.media;
+
+                  return (
+                    <TableRow key={aprovacao.id}>
+                      <TableCell className="font-medium">
+                        {titulo?.documento}
+                      </TableCell>
+                      <TableCell>{fornecedor?.nome}</TableCell>
+                      <TableCell>{aprovacao.solicitante}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={aprovacao.valor} />
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-muted-foreground">
+                          {aprovacao.politica}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <Badge className={urgencia.className} variant="outline">
+                          {urgencia.label}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {formatarData(aprovacao.dataSolicitacao)}
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex justify-end gap-2">
+                          <AprovacaoDialog
+                            tipo="aprovar"
+                            t={t}
+                            onConfirm={() => handleAprovacao(aprovacao.id)}
+                          />
+                          <AprovacaoDialog
+                            tipo="reprovar"
+                            t={t}
+                            onConfirm={() => handleAprovacao(aprovacao.id)}
+                          />
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <CheckCircle className="h-12 w-12 text-green-500" />
+              <h3 className="mt-4 text-lg font-semibold">{t('empty.title')}</h3>
+              <p className="text-muted-foreground">{t('empty.description')}</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}