@hed-hog/finance 0.0.274 → 0.0.276

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

@@ -1,373 +1,373 @@
-'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 { useApp } from '@hed-hog/next-app-provider';
-import { AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { formatarData } from '../../_lib/formatters';
-import { useFinanceData } from '../../_lib/use-finance-data';
-
-function AprovacaoDialog({
-  tipo,
-  onConfirm,
-  t,
-}: {
-  tipo: 'aprovar' | 'reprovar';
-  onConfirm: (comment?: string) => void;
-  t: ReturnType<typeof useTranslations>;
-}) {
-  const isAprovar = tipo === 'aprovar';
-  const [comment, setComment] = useState('');
-
-  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"
-              value={comment}
-              onChange={(event) => setComment(event.target.value)}
-              placeholder={
-                isAprovar
-                  ? t('dialog.optionalCommentPlaceholder')
-                  : t('dialog.rejectReasonPlaceholder')
-              }
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button type="button" variant="outline">
-            {t('dialog.cancel')}
-          </Button>
-          <Button
-            type="button"
-            variant={isAprovar ? 'default' : 'destructive'}
-            onClick={() => onConfirm(comment || undefined)}
-          >
-            {isAprovar ? t('dialog.confirmApprove') : t('dialog.confirmReject')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default function AprovacoesPage() {
-  const t = useTranslations('finance.PayableApprovalsPage');
-  const { request, showToastHandler } = useApp();
-  const { data, refetch } = useFinanceData();
-  const { aprovacoesPendentes, titulosPagar, pessoas } = data;
-
-  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
-
-  const aprovacoes = useMemo(() => {
-    const pendenciasDoBackend = Array.isArray(aprovacoesPendentes)
-      ? aprovacoesPendentes
-      : [];
-
-    const pendenciasDerivadasDosTitulos = (
-      Array.isArray(titulosPagar) ? titulosPagar : []
-    )
-      .filter(
-        (titulo) => titulo.status === 'rascunho' || titulo.status === 'draft'
-      )
-      .map((titulo) => ({
-        id: String(titulo.id),
-        tituloId: String(titulo.id),
-        solicitante: '-',
-        valor: Number(titulo.valorTotal || 0),
-        politica: 'Aprovação financeira',
-        urgencia: 'media',
-        dataSolicitacao: titulo.criadoEm,
-      }));
-
-    const basePendencias =
-      pendenciasDoBackend.length > 0
-        ? pendenciasDoBackend
-        : pendenciasDerivadasDosTitulos;
-
-    return basePendencias;
-  }, [aprovacoesPendentes, titulosPagar]);
-
-  const handleAprovacao = async (_id: string, tituloId?: string) => {
-    if (!tituloId) {
-      showToastHandler?.('error', 'Título inválido para aprovação');
-      return;
-    }
-
-    try {
-      await request({
-        url: `/finance/accounts-payable/installments/${tituloId}/approve`,
-        method: 'PATCH',
-      });
-
-      await refetch();
-      showToastHandler?.('success', 'Título aprovado com sucesso');
-    } catch {
-      showToastHandler?.('error', 'Não foi possível aprovar o título');
-    }
-  };
-
-  const handleReprovacao = async (
-    _id: string,
-    tituloId?: string,
-    reason?: string
-  ) => {
-    if (!tituloId) {
-      showToastHandler?.('error', 'Título inválido para reprovação');
-      return;
-    }
-
-    try {
-      await request({
-        url: `/finance/accounts-payable/installments/${tituloId}/reject`,
-        method: 'PATCH',
-        data: {
-          reason: reason || undefined,
-        },
-      });
-
-      await refetch();
-      showToastHandler?.('success', 'Título reprovado com sucesso');
-    } catch {
-      showToastHandler?.('error', 'Não foi possível reprovar o título');
-    }
-  };
-
-  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={() =>
-                              void handleAprovacao(
-                                aprovacao.id,
-                                aprovacao.tituloId
-                              )
-                            }
-                          />
-                          <AprovacaoDialog
-                            tipo="reprovar"
-                            t={t}
-                            onConfirm={(comment) =>
-                              void handleReprovacao(
-                                aprovacao.id,
-                                aprovacao.tituloId,
-                                comment
-                              )
-                            }
-                          />
-                        </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>
-  );
-}
+'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 { useApp } from '@hed-hog/next-app-provider';
+import { AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function AprovacaoDialog({
+  tipo,
+  onConfirm,
+  t,
+}: {
+  tipo: 'aprovar' | 'reprovar';
+  onConfirm: (comment?: string) => void;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const isAprovar = tipo === 'aprovar';
+  const [comment, setComment] = useState('');
+
+  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"
+              value={comment}
+              onChange={(event) => setComment(event.target.value)}
+              placeholder={
+                isAprovar
+                  ? t('dialog.optionalCommentPlaceholder')
+                  : t('dialog.rejectReasonPlaceholder')
+              }
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="button" variant="outline">
+            {t('dialog.cancel')}
+          </Button>
+          <Button
+            type="button"
+            variant={isAprovar ? 'default' : 'destructive'}
+            onClick={() => onConfirm(comment || undefined)}
+          >
+            {isAprovar ? t('dialog.confirmApprove') : t('dialog.confirmReject')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function AprovacoesPage() {
+  const t = useTranslations('finance.PayableApprovalsPage');
+  const { request, showToastHandler } = useApp();
+  const { data, refetch } = useFinanceData();
+  const { aprovacoesPendentes, titulosPagar, pessoas } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const aprovacoes = useMemo(() => {
+    const pendenciasDoBackend = Array.isArray(aprovacoesPendentes)
+      ? aprovacoesPendentes
+      : [];
+
+    const pendenciasDerivadasDosTitulos = (
+      Array.isArray(titulosPagar) ? titulosPagar : []
+    )
+      .filter(
+        (titulo) => titulo.status === 'rascunho' || titulo.status === 'draft'
+      )
+      .map((titulo) => ({
+        id: String(titulo.id),
+        tituloId: String(titulo.id),
+        solicitante: '-',
+        valor: Number(titulo.valorTotal || 0),
+        politica: 'Aprovação financeira',
+        urgencia: 'media',
+        dataSolicitacao: titulo.criadoEm,
+      }));
+
+    const basePendencias =
+      pendenciasDoBackend.length > 0
+        ? pendenciasDoBackend
+        : pendenciasDerivadasDosTitulos;
+
+    return basePendencias;
+  }, [aprovacoesPendentes, titulosPagar]);
+
+  const handleAprovacao = async (_id: string, tituloId?: string) => {
+    if (!tituloId) {
+      showToastHandler?.('error', 'Título inválido para aprovação');
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${tituloId}/approve`,
+        method: 'PATCH',
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Título aprovado com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível aprovar o título');
+    }
+  };
+
+  const handleReprovacao = async (
+    _id: string,
+    tituloId?: string,
+    reason?: string
+  ) => {
+    if (!tituloId) {
+      showToastHandler?.('error', 'Título inválido para reprovação');
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/accounts-payable/installments/${tituloId}/reject`,
+        method: 'PATCH',
+        data: {
+          reason: reason || undefined,
+        },
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Título reprovado com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Não foi possível reprovar o título');
+    }
+  };
+
+  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={() =>
+                              void handleAprovacao(
+                                aprovacao.id,
+                                aprovacao.tituloId
+                              )
+                            }
+                          />
+                          <AprovacaoDialog
+                            tipo="reprovar"
+                            t={t}
+                            onConfirm={(comment) =>
+                              void handleReprovacao(
+                                aprovacao.id,
+                                aprovacao.tituloId,
+                                comment
+                              )
+                            }
+                          />
+                        </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>
+  );
+}