@hed-hog/finance 0.0.299 → 0.0.301

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

@@ -1,30 +1,26 @@
 '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,
+'use client';
+
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+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,
+} from '@/components/ui/dialog';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Table,
+  TableBody,
   TableCell,
   TableHead,
   TableHeader,
@@ -211,10 +207,38 @@ export default function AprovacoesPage() {
     },
   };
 
-  const totalPendente = aprovacoes.reduce((acc, a) => acc + a.valor, 0);
-
-  return (
-    <Page>
+  const totalPendente = aprovacoes.reduce((acc, a) => acc + a.valor, 0);
+  const urgentCount = aprovacoes.filter(
+    (a) => a.urgencia === 'alta' || a.urgencia === 'critica'
+  ).length;
+  const summaryCards = [
+    {
+      key: 'pending',
+      title: t('cards.pending'),
+      value: aprovacoes.length,
+      icon: Clock,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'value',
+      title: t('cards.totalValue'),
+      value: <Money value={totalPendente} />,
+      icon: AlertTriangle,
+      layout: 'compact' as const,
+    },
+    {
+      key: 'urgent',
+      title: t('cards.urgent'),
+      value: urgentCount,
+      icon: AlertTriangle,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-orange-500/10 text-orange-700',
+      accentClassName: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    },
+  ];
+
+  return (
+    <Page>
       <PageHeader
         title={t('header.title')}
         description={t('header.description')}
@@ -222,63 +246,20 @@ export default function AprovacoesPage() {
           { 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>
+        ]}
+      />
+
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+      >
+        {aprovacoes.length > 0 ? (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
                   <TableHead>{t('table.headers.document')}</TableHead>
                   <TableHead>{t('table.headers.supplier')}</TableHead>
                   <TableHead>{t('table.headers.requester')}</TableHead>
@@ -301,16 +282,16 @@ export default function AprovacoesPage() {
                   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>
+                  const urgencia =
+                    urgenciaConfig[
+                      aprovacao.urgencia as keyof typeof urgenciaConfig
+                    ] || urgenciaConfig.media;
+
+                  return (
+                    <TableRow key={aprovacao.id} className="hover:bg-muted/30">
+                      <TableCell className="font-medium">
+                        {titulo?.documento}
+                      </TableCell>
                       <TableCell>{fornecedor?.nome}</TableCell>
                       <TableCell>{aprovacao.solicitante}</TableCell>
                       <TableCell className="text-right">
@@ -356,18 +337,22 @@ export default function AprovacoesPage() {
                       </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>
-  );
-}
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <div className="px-4 py-8 sm:px-6">
+            <EmptyState
+              icon={<CheckCircle className="h-12 w-12" />}
+              title={t('empty.title')}
+              description={t('empty.description')}
+              actionLabel={t('empty.refresh')}
+              onAction={() => void refetch()}
+            />
+          </div>
+        )}
+      </FinancePageSection>
+    </Page>
+  );
+}