@hed-hog/finance 0.0.302 → 0.0.303

package/hedhog/frontend/app/accounts-receivable/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,
@@ -9,7 +10,6 @@ import {
   FinanceSheetBody,
   FinanceSheetSection,
 } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
-import { PersonFieldWithCreate } from '@/app/(app)/(libraries)/contact/person/_components/person-field-with-create';
 import {
   EmptyState,
   Page,
@@ -2449,7 +2449,7 @@ export default function TitulosReceberPage() {
         />
       </div>
 
-      <FinancePageSection className="border-none shadow-none p-0">
+      <FinancePageSection variant="flat">
         {titulosReceber.length > 0 ? (
           <div className="overflow-x-auto">
             <Table className="min-w-[760px]">
@@ -2572,15 +2572,13 @@ export default function TitulosReceberPage() {
             </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={() => void refetchTitles()}
-            />
-          </div>
+          <EmptyState
+            icon={<FileText className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('newTitle.action')}
+            onAction={() => void refetchTitles()}
+          />
         )}
 
         <div className="border-t border-border/50 px-4 py-4 sm:px-6">

package/hedhog/frontend/app/administration/audit-logs/page.tsx.ejs

@@ -45,6 +45,8 @@ type PaginatedAuditLogs = {
   data: AuditLog[];
 };
 
+const EMPTY_AUDIT_LOGS: AuditLog[] = [];
+
 export default function AuditLogsPage() {
   const t = useTranslations('finance.AdminAuditLogsPage');
   const { request } = useApp();
@@ -100,7 +102,7 @@ export default function AuditLogsPage() {
     placeholderData: (old) => old,
   });
 
-  const rows = data?.data || [];
+  const rows = data?.data ?? EMPTY_AUDIT_LOGS;
 
   const entityOptions = useMemo(() => {
     const unique = new Set(rows.map((row) => row.entityTable).filter(Boolean));
@@ -122,8 +124,8 @@ export default function AuditLogsPage() {
         ]}
       />
 
-      <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
-        <div className="relative lg:col-span-2">
+      <div className="flex flex-col gap-4 xl:flex-row xl:flex-wrap xl:items-center">
+        <div className="relative min-w-[260px] flex-1">
           <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder={t('filters.searchPlaceholder')}
@@ -143,7 +145,7 @@ export default function AuditLogsPage() {
             setPage(1);
           }}
         >
-          <SelectTrigger className="w-full">
+          <SelectTrigger className="w-full sm:w-[180px]">
             <SelectValue placeholder={t('filters.action')} />
           </SelectTrigger>
           <SelectContent>
@@ -161,6 +163,7 @@ export default function AuditLogsPage() {
             setActorUserId(event.target.value);
             setPage(1);
           }}
+          className="w-full sm:w-[220px]"
         />
 
         <Select
@@ -170,7 +173,7 @@ export default function AuditLogsPage() {
             setPage(1);
           }}
         >
-          <SelectTrigger className="w-full">
+          <SelectTrigger className="w-full sm:w-[180px]">
             <SelectValue placeholder={t('filters.entity')} />
           </SelectTrigger>
           <SelectContent>
@@ -189,6 +192,7 @@ export default function AuditLogsPage() {
             setFrom(event.target.value);
             setPage(1);
           }}
+          className="w-full sm:w-[220px]"
         />
 
         <Input
@@ -198,11 +202,12 @@ export default function AuditLogsPage() {
             setTo(event.target.value);
             setPage(1);
           }}
+          className="w-full sm:w-[220px]"
         />
 
         <Button
           variant="outline"
-          className="gap-2"
+          className="gap-2 xl:ml-auto w-full sm:w-auto"
           onClick={() => {
             setSearch('');
             setAction('all');
@@ -266,7 +271,7 @@ export default function AuditLogsPage() {
                   </TableCell>
                   <TableCell>{row.entityTable}</TableCell>
                   <TableCell>{row.entityId}</TableCell>
-                  <TableCell className="max-w-[360px] truncate">
+                  <TableCell className="max-w-90 truncate">
                     {row.summary || '-'}
                   </TableCell>
                   <TableCell>{row.ipAddress || '-'}</TableCell>

package/hedhog/frontend/app/administration/categories/page.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -55,6 +55,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ChevronDown,
   ChevronRight,
+  FolderTree,
   GripVertical,
   Pencil,
   Plus,
@@ -81,6 +82,8 @@ type FinanceCategory = {
   ativo: boolean;
 };
 
+const EMPTY_CATEGORIES: FinanceCategory[] = [];
+
 type CategoryNode = FinanceCategory & { children: CategoryNode[] };
 
 function buildTree(categories: FinanceCategory[]): CategoryNode[] {
@@ -126,7 +129,7 @@ function CategoriaSheet({
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onSaved: () => Promise<any> | void;
+  onSaved: () => Promise<unknown> | void;
   editing: FinanceCategory | null;
   setEditing: (item: FinanceCategory | null) => void;
   categories: FinanceCategory[];
@@ -351,12 +354,19 @@ function CategoryRow({
   dropHint?: 'inside' | 'before' | 'after';
   t: ReturnType<typeof useTranslations>;
 }) {
-  const sortable = useSortable({ id: item.id });
+  const {
+    attributes,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id: item.id });
   const style = {
-    transform: sortable.transform
-      ? `translate3d(${sortable.transform.x}px, ${sortable.transform.y}px, 0)`
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
       : undefined,
-    transition: sortable.transition,
+    transition,
   };
 
   const hasChildren = item.children.length > 0;
@@ -364,7 +374,7 @@ function CategoryRow({
 
   return (
     <div
-      ref={sortable.setNodeRef}
+      ref={setNodeRef}
       style={style}
       className={`rounded-md border bg-background ${
         dropHint === 'inside' ? 'ring-1 ring-primary/50 bg-muted/40' : ''
@@ -402,9 +412,9 @@ function CategoryRow({
 
           <button
             type="button"
-            ref={sortable.setActivatorNodeRef}
-            {...sortable.listeners}
-            {...sortable.attributes}
+            ref={setActivatorNodeRef}
+            {...listeners}
+            {...attributes}
             className="inline-flex h-7 w-7 items-center justify-center rounded border"
           >
             <GripVertical className="h-4 w-4" />
@@ -467,7 +477,7 @@ export default function CategoriesPage() {
     placeholderData: [],
   });
 
-  const categories = data || [];
+  const categories = data ?? EMPTY_CATEGORIES;
   const tree = useMemo(() => buildTree(categories), [categories]);
   const flat = useMemo(() => flattenTree(tree), [tree]);
 
@@ -628,9 +638,17 @@ export default function CategoriesPage() {
 
       <div className="space-y-4">
         {flat.length === 0 ? (
-          <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
-            {t('table.empty')}
-          </div>
+          <EmptyState
+            icon={<FolderTree className="h-12 w-12" />}
+            title={t('table.empty')}
+            description={t('header.description')}
+            actionLabel={t('actions.newCategory')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={() => {
+              setEditing(null);
+              setSheetOpen(true);
+            }}
+          />
         ) : (
           <DndContext
             sensors={sensors}

package/hedhog/frontend/app/administration/cost-centers/page.tsx.ejs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -59,7 +59,7 @@ function CentroCustoSheet({
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onSaved: () => Promise<any> | void;
+  onSaved: () => Promise<unknown> | void;
   editingCostCenter: CostCenter | null;
   onEditingChange: (costCenter: CostCenter | null) => void;
   t: ReturnType<typeof useTranslations>;
@@ -270,9 +270,17 @@ export default function CostCentersPage() {
 
       <div className="space-y-4">
         {centers.length === 0 ? (
-          <div className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
-            {t('table.empty')}
-          </div>
+          <EmptyState
+            icon={<Building2 className="h-12 w-12" />}
+            title={t('table.empty')}
+            description={t('header.description')}
+            actionLabel={t('actions.newCostCenter')}
+            actionIcon={<Plus className="mr-2 h-4 w-4" />}
+            onAction={() => {
+              setEditingCostCenter(null);
+              setSheetOpen(true);
+            }}
+          />
         ) : (
           <div className="grid gap-3">
             {centers.map((costCenter) => (

package/hedhog/frontend/app/administration/period-close/page.tsx.ejs

@@ -78,7 +78,7 @@ function ClosePeriodSheet({
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreated: () => Promise<any> | void;
+  onCreated: () => Promise<unknown> | void;
   t: ReturnType<typeof useTranslations>;
 }) {
   const { request, showToastHandler } = useApp();
@@ -310,168 +310,169 @@ export default function PeriodClosePage() {
         }
       />
 
-      <div className="space-y-4">
-        <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
-          <div className="relative lg:col-span-2">
-            <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder={t('filters.searchPlaceholder')}
-              value={search}
-              onChange={(event) => {
-                setSearch(event.target.value);
-                setPage(1);
-              }}
-              className="pl-8"
-            />
-          </div>
-
-          <Select
-            value={status}
-            onValueChange={(value) => {
-              setStatus(value);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder={t('filters.status')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
-              <SelectItem value="closed">{t('status.closed')}</SelectItem>
-              <SelectItem value="open">{t('status.open')}</SelectItem>
-            </SelectContent>
-          </Select>
-
+      <div className="flex flex-col gap-4 xl:flex-row xl:flex-wrap xl:items-center">
+        <div className="relative min-w-[260px] flex-1">
+          <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
-            placeholder={t('filters.userPlaceholder')}
-            value={user}
+            placeholder={t('filters.searchPlaceholder')}
+            value={search}
             onChange={(event) => {
-              setUser(event.target.value);
+              setSearch(event.target.value);
               setPage(1);
             }}
+            className="pl-8"
           />
+        </div>
 
-          <Input
-            type="date"
-            value={from}
-            onChange={(event) => {
-              setFrom(event.target.value);
-              setPage(1);
-            }}
-          />
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value);
+            setPage(1);
+          }}
+        >
+          <SelectTrigger className="w-full sm:w-[180px]">
+            <SelectValue placeholder={t('filters.status')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t('filters.allStatus')}</SelectItem>
+            <SelectItem value="closed">{t('status.closed')}</SelectItem>
+            <SelectItem value="open">{t('status.open')}</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Input
+          placeholder={t('filters.userPlaceholder')}
+          value={user}
+          onChange={(event) => {
+            setUser(event.target.value);
+            setPage(1);
+          }}
+          className="w-full sm:w-[220px]"
+        />
 
-          <Input
-            type="date"
-            value={to}
-            onChange={(event) => {
-              setTo(event.target.value);
-              setPage(1);
-            }}
-          />
+        <Input
+          type="date"
+          value={from}
+          onChange={(event) => {
+            setFrom(event.target.value);
+            setPage(1);
+          }}
+          className="w-full sm:w-[220px]"
+        />
 
-          <Button
-            variant="outline"
-            className="gap-2"
-            onClick={() => {
-              setSearch('');
-              setStatus('all');
-              setUser('');
-              setFrom('');
-              setTo('');
-              setPage(1);
-              refetch();
-            }}
-          >
-            <X className="h-4 w-4" />
-            {t('filters.clear')}
-          </Button>
-        </div>
+        <Input
+          type="date"
+          value={to}
+          onChange={(event) => {
+            setTo(event.target.value);
+            setPage(1);
+          }}
+          className="w-full sm:w-[220px]"
+        />
 
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
+        <Button
+          variant="outline"
+          className="gap-2 xl:ml-auto w-full sm:w-auto"
+          onClick={() => {
+            setSearch('');
+            setStatus('all');
+            setUser('');
+            setFrom('');
+            setTo('');
+            setPage(1);
+            refetch();
+          }}
+        >
+          <X className="h-4 w-4" />
+          {t('filters.clear')}
+        </Button>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('table.headers.start')}</TableHead>
+              <TableHead>{t('table.headers.end')}</TableHead>
+              <TableHead>{t('table.headers.status')}</TableHead>
+              <TableHead>{t('table.headers.closedBy')}</TableHead>
+              <TableHead>{t('table.headers.closedAt')}</TableHead>
+              <TableHead>{t('table.headers.notes')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={6} className="h-24 text-center">
+                  {t('table.loading')}
+                </TableCell>
+              </TableRow>
+            ) : rows.length === 0 ? (
               <TableRow>
-                <TableHead>{t('table.headers.start')}</TableHead>
-                <TableHead>{t('table.headers.end')}</TableHead>
-                <TableHead>{t('table.headers.status')}</TableHead>
-                <TableHead>{t('table.headers.closedBy')}</TableHead>
-                <TableHead>{t('table.headers.closedAt')}</TableHead>
-                <TableHead>{t('table.headers.notes')}</TableHead>
+                <TableCell colSpan={6} className="h-24 text-center">
+                  {t('table.empty')}
+                </TableCell>
               </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="h-24 text-center">
-                    {t('table.loading')}
+            ) : (
+              rows.map((row) => (
+                <TableRow key={row.id}>
+                  <TableCell>
+                    {row.periodStart
+                      ? new Date(row.periodStart).toLocaleDateString('pt-BR')
+                      : '-'}
                   </TableCell>
-                </TableRow>
-              ) : rows.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={6} className="h-24 text-center">
-                    {t('table.empty')}
+                  <TableCell>
+                    {row.periodEnd
+                      ? new Date(row.periodEnd).toLocaleDateString('pt-BR')
+                      : '-'}
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={
+                        row.status === 'closed' ? 'default' : 'secondary'
+                      }
+                    >
+                      {row.status === 'closed'
+                        ? t('status.closed')
+                        : t('status.open')}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex flex-col">
+                      <span>{row.closedByName || '-'}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {row.closedByEmail || row.closedByUserId || '-'}
+                      </span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {row.closedAt
+                      ? new Date(row.closedAt).toLocaleString('pt-BR')
+                      : '-'}
+                  </TableCell>
+                  <TableCell className="max-w-80 truncate">
+                    {row.notes || '-'}
                   </TableCell>
                 </TableRow>
-              ) : (
-                rows.map((row) => (
-                  <TableRow key={row.id}>
-                    <TableCell>
-                      {row.periodStart
-                        ? new Date(row.periodStart).toLocaleDateString('pt-BR')
-                        : '-'}
-                    </TableCell>
-                    <TableCell>
-                      {row.periodEnd
-                        ? new Date(row.periodEnd).toLocaleDateString('pt-BR')
-                        : '-'}
-                    </TableCell>
-                    <TableCell>
-                      <Badge
-                        variant={
-                          row.status === 'closed' ? 'default' : 'secondary'
-                        }
-                      >
-                        {row.status === 'closed'
-                          ? t('status.closed')
-                          : t('status.open')}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex flex-col">
-                        <span>{row.closedByName || '-'}</span>
-                        <span className="text-xs text-muted-foreground">
-                          {row.closedByEmail || row.closedByUserId || '-'}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {row.closedAt
-                        ? new Date(row.closedAt).toLocaleString('pt-BR')
-                        : '-'}
-                    </TableCell>
-                    <TableCell className="max-w-80 truncate">
-                      {row.notes || '-'}
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
-
-        <PaginationFooter
-          currentPage={data?.page || page}
-          pageSize={data?.pageSize || pageSize}
-          totalItems={data?.total || 0}
-          onPageChange={(newPage) => setPage(newPage)}
-          onPageSizeChange={(newPageSize) => {
-            setPageSize(newPageSize);
-            setPage(1);
-          }}
-          pageSizeOptions={[10, 20, 30, 40, 50]}
-        />
+              ))
+            )}
+          </TableBody>
+        </Table>
       </div>
 
+      <PaginationFooter
+        currentPage={data?.page || page}
+        pageSize={data?.pageSize || pageSize}
+        totalItems={data?.total || 0}
+        onPageChange={(newPage) => setPage(newPage)}
+        onPageSizeChange={(newPageSize) => {
+          setPageSize(newPageSize);
+          setPage(1);
+        }}
+        pageSizeOptions={[10, 20, 30, 40, 50]}
+      />
+
       <ClosePeriodSheet
         open={sheetOpen}
         onOpenChange={setSheetOpen}

package/hedhog/frontend/app/cash-and-banks/bank-accounts/page.tsx.ejs

@@ -20,7 +20,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import {
   Form,
   FormControl,
@@ -31,6 +30,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -46,11 +46,6 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import {
-  FinancePageSection,
-  FinanceSheetBody,
-  FinanceSheetSection,
-} from '../../_components/finance-layout';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -72,6 +67,11 @@ import Link from 'next/link';
 import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
+import {
+  FinancePageSection,
+  FinanceSheetBody,
+  FinanceSheetSection,
+} from '../../_components/finance-layout';
 
 const bankAccountFormSchema = z.object({
   banco: z.string().trim().min(1, 'Banco é obrigatório'),
@@ -890,10 +890,7 @@ export default function ContasBancariasPage() {
 
       <KpiCardsGrid items={summaryCards} columns={3} />
 
-      <FinancePageSection
-        contentClassName="p-0"
-        className="border-none shadow-none"
-      >
+      <FinancePageSection variant="flat" contentClassName="p-0">
         {accounts.length > 0 ? (
           <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
             {accounts.map((conta) => {
@@ -1033,15 +1030,13 @@ export default function ContasBancariasPage() {
             })}
           </div>
         ) : (
-          <div className="p-6 sm:p-8">
-            <EmptyState
-              icon={<Landmark className="h-12 w-12" />}
-              title={t('empty.title')}
-              description={t('empty.description')}
-              actionLabel={t('newAccount.action')}
-              onAction={handleCreate}
-            />
-          </div>
+          <EmptyState
+            icon={<Landmark className="h-12 w-12" />}
+            title={t('empty.title')}
+            description={t('empty.description')}
+            actionLabel={t('newAccount.action')}
+            onAction={handleCreate}
+          />
         )}
       </FinancePageSection>
     </Page>