@hed-hog/finance 0.0.223 → 0.0.224

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,265 @@
+'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 { PageHeader } from '@/components/ui/page-header';
+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 { useEffect, useState } from 'react';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+const urgenciaConfig = {
+  baixa: { label: 'Baixa', className: 'bg-slate-100 text-slate-700' },
+  media: { label: 'Média', className: 'bg-blue-100 text-blue-700' },
+  alta: { label: 'Alta', className: 'bg-orange-100 text-orange-700' },
+  critica: { label: 'Crítica', className: 'bg-red-100 text-red-700' },
+};
+
+function AprovacaoDialog({
+  tipo,
+  onConfirm,
+}: {
+  tipo: 'aprovar' | 'reprovar';
+  onConfirm: () => void;
+}) {
+  const isAprovar = tipo === 'aprovar';
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant={isAprovar ? 'default' : 'outline'} size="sm">
+          {isAprovar ? (
+            <>
+              <CheckCircle className="mr-2 h-4 w-4" />
+              Aprovar
+            </>
+          ) : (
+            <>
+              <XCircle className="mr-2 h-4 w-4" />
+              Reprovar
+            </>
+          )}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isAprovar ? 'Aprovar Título' : 'Reprovar Título'}
+          </DialogTitle>
+          <DialogDescription>
+            {isAprovar
+              ? 'Confirme a aprovação deste título para pagamento.'
+              : 'Informe o motivo da reprovação.'}
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="comentario">Comentário</Label>
+            <Textarea
+              id="comentario"
+              placeholder={
+                isAprovar
+                  ? 'Comentário opcional...'
+                  : 'Informe o motivo da reprovação...'
+              }
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">Cancelar</Button>
+          <Button
+            variant={isAprovar ? 'default' : 'destructive'}
+            onClick={onConfirm}
+          >
+            {isAprovar ? 'Confirmar Aprovação' : 'Confirmar Reprovação'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function AprovacoesPage() {
+  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 totalPendente = aprovacoes.reduce((acc, a) => acc + a.valor, 0);
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        title="Aprovações"
+        description="Gerencie as aprovações de títulos"
+        breadcrumbs={[
+          {
+            label: 'Contas a Pagar',
+            href: '/finance/accounts-payable/installments',
+          },
+          { label: 'Aprovações' },
+        ]}
+      />
+
+      <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">Pendentes</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">Valor Total</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">Urgentes</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>Aprovações Pendentes</CardTitle>
+          <CardDescription>Títulos aguardando sua aprovação</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {aprovacoes.length > 0 ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Documento</TableHead>
+                  <TableHead>Fornecedor</TableHead>
+                  <TableHead>Solicitante</TableHead>
+                  <TableHead className="text-right">Valor</TableHead>
+                  <TableHead>Política</TableHead>
+                  <TableHead>Urgência</TableHead>
+                  <TableHead>Data</TableHead>
+                  <TableHead className="text-right">Ações</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"
+                            onConfirm={() => handleAprovacao(aprovacao.id)}
+                          />
+                          <AprovacaoDialog
+                            tipo="reprovar"
+                            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">Tudo em dia!</h3>
+              <p className="text-muted-foreground">
+                Não há aprovações pendentes.
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}