@hed-hog/finance 0.0.302 → 0.0.303

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

@@ -3,9 +3,9 @@
 '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 { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import {
   Dialog,
   DialogContent,
@@ -251,7 +251,7 @@ export default function AprovacoesPage() {
 
       <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <FinancePageSection className="border-none shadow-none p-0">
+      <FinancePageSection variant="flat">
         {aprovacoes.length > 0 ? (
           <div className="overflow-x-auto">
             <Table>
@@ -339,15 +339,13 @@ export default function AprovacoesPage() {
             </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>
+          <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>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
 import {
   CategoryFieldWithCreate,
   CostCenterFieldWithCreate,
@@ -10,7 +11,6 @@ import {
   FinanceSheetSection,
 } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { FinanceTitleActionsMenu } from '@/app/(app)/(libraries)/finance/_components/finance-title-actions-menu';
-import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
 import {
   EmptyState,
   Page,
@@ -2840,10 +2840,10 @@ export default function TitulosPagarPage() {
         </SheetContent>
       </Sheet>
 
-      <FinancePageSection className="border-none shadow-none p-0">
+      <FinancePageSection variant="flat">
         {titulosPagar.length > 0 ? (
           <div className="overflow-x-auto">
-            <Table className="min-w-[760px]">
+            <Table className="min-w-190">
               <TableHeader>
                 <TableRow>
                   <TableHead>{t('table.headers.document')}</TableHead>
@@ -2855,7 +2855,7 @@ export default function TitulosPagarPage() {
                   </TableHead>
                   <TableHead>{t('table.headers.category')}</TableHead>
                   <TableHead>{t('table.headers.status')}</TableHead>
-                  <TableHead className="w-[50px]" />
+                  <TableHead className="w-12.5" />
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -2969,15 +2969,13 @@ export default function TitulosPagarPage() {
             </Table>
           </div>
         ) : (
-          <div className="px-4 py-8 sm:px-6">
-            <EmptyState
-              icon={<FileText className="h-12 w-12" />}
-              title={t('empty.title')}
-              description={t('empty.description')}
-              actionLabel={t('newTitle.action')}
-              onAction={() => setIsNewTitleSheetOpen(true)}
-            />
-          </div>
+          <EmptyState
+            icon={<FileText className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('newTitle.action')}
+            onAction={() => setIsNewTitleSheetOpen(true)}
+          />
         )}
 
         <div className="border-t border-border/50 px-4 py-4 sm:px-6">