@hed-hog/finance 0.0.301 → 0.0.303

package/hedhog/data/menu.yaml

@@ -11,23 +11,6 @@
       - where:
           slug: admin-finance
 
-- menu_id:
-    where:
-      slug: /finance
-  icon: chart-no-axes-combined
-  url: /finance
-  name:
-    en: Overview
-    pt: Visão geral
-  slug: /finance/overview
-  order: 101
-  relations:
-    role:
-      - where:
-          slug: admin
-      - where:
-          slug: admin-finance
-
 - menu_id:
     where:
       slug: /finance

package/hedhog/frontend/app/_components/finance-layout.tsx.ejs

@@ -17,6 +17,7 @@ type FinancePageSectionProps = {
   children: ReactNode;
   className?: string;
   contentClassName?: string;
+  variant?: 'card' | 'flat';
 };
 
 export function FinancePageSection({
@@ -26,9 +27,31 @@ export function FinancePageSection({
   children,
   className,
   contentClassName,
+  variant = 'card',
 }: FinancePageSectionProps) {
   const hasHeader = title || description || actions;
 
+  if (variant === 'flat') {
+    return (
+      <section className={cn('space-y-4', className)}>
+        {hasHeader ? (
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-1">
+              {title ? (
+                <h2 className="text-base font-semibold">{title}</h2>
+              ) : null}
+              {description ? (
+                <p className="text-sm text-muted-foreground">{description}</p>
+              ) : null}
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        ) : null}
+        <div className={cn(contentClassName)}>{children}</div>
+      </section>
+    );
+  }
+
   return (
     <Card
       className={cn(

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

@@ -1,26 +1,26 @@
 'use client';
 
-'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,
+'use client';
+
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} 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,
+} 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,
@@ -207,38 +207,38 @@ export default function AprovacoesPage() {
     },
   };
 
-  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>
+  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')}
@@ -246,20 +246,17 @@ export default function AprovacoesPage() {
           { label: t('breadcrumbs.home'), href: '/' },
           { label: t('breadcrumbs.finance'), href: '/finance' },
           { label: t('breadcrumbs.current') },
-        ]}
-      />
-
-      <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>
+        ]}
+      />
+
+      <KpiCardsGrid items={summaryCards} columns={3} />
+
+      <FinancePageSection variant="flat">
+        {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>
@@ -282,16 +279,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} className="hover:bg-muted/30">
-                      <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">
@@ -337,22 +334,20 @@ export default function AprovacoesPage() {
                       </TableCell>
                     </TableRow>
                   );
-                })}
-              </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>
-  );
-}
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        ) : (
+          <EmptyState
+            icon={<CheckCircle className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('empty.refresh')}
+            onAction={() => void refetch()}
+          />
+        )}
+      </FinancePageSection>
+    </Page>
+  );
+}