@hed-hog/finance 0.0.300 → 0.0.302

package/hedhog/frontend/app/reports/top-operational-expenses/page.tsx.ejs

@@ -1,5 +1,6 @@
 'use client';
 
+import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
 import { Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import {
@@ -10,6 +11,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -88,6 +90,41 @@ export default function TopOperationalExpensesReportPage() {
     setAppliedFilters(filters);
   };
 
+  const summaryCards = [
+    {
+      key: 'total',
+      title: t('cards.total'),
+      value: <Money value={viewData.total} />,
+      icon: CircleDollarSign,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-orange-500/10 text-orange-600',
+      accentClassName: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    },
+    {
+      key: 'highestExpense',
+      title: t('cards.highestExpense'),
+      value: viewData.highest?.category || '-',
+      description: viewData.highest ? (
+        <Money value={viewData.highest.value} />
+      ) : (
+        '-'
+      ),
+      icon: TriangleAlert,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-amber-500/10 text-amber-500',
+      accentClassName: 'from-amber-500/20 via-yellow-500/10 to-transparent',
+    },
+    {
+      key: 'average',
+      title: t('cards.average'),
+      value: <Money value={viewData.average} />,
+      icon: Building2,
+      layout: 'compact' as const,
+      iconContainerClassName: 'bg-blue-500/10 text-blue-600',
+      accentClassName: 'from-blue-500/20 via-sky-500/10 to-transparent',
+    },
+  ];
+
   const renderSolidTooltip = ({
     active,
     payload,
@@ -163,7 +200,7 @@ export default function TopOperationalExpensesReportPage() {
             }))
           }
           max={filters.to}
-          className="w-full lg:w-[170px]"
+          className="w-full lg:w-42.5"
           aria-label={t('filters.fromAria')}
           placeholder={t('filters.fromPlaceholder')}
         />
@@ -178,7 +215,7 @@ export default function TopOperationalExpensesReportPage() {
             }))
           }
           min={filters.from}
-          className="w-full lg:w-[170px]"
+          className="w-full lg:w-42.5"
           aria-label={t('filters.toAria')}
           placeholder={t('filters.toPlaceholder')}
         />
@@ -192,7 +229,7 @@ export default function TopOperationalExpensesReportPage() {
           }
         >
           <SelectTrigger
-            className="w-full lg:w-[150px]"
+            className="w-full lg:w-37.5"
             aria-label={t('filters.groupByAria')}
           >
             <SelectValue placeholder={t('filters.groupByPlaceholder')} />
@@ -213,62 +250,7 @@ export default function TopOperationalExpensesReportPage() {
         </Button>
       </form>
 
-      <div className="grid gap-3 md:grid-cols-3">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.total')}
-            </CardTitle>
-            <div className="rounded-full bg-orange-500/10 p-1.5">
-              <CircleDollarSign className="h-4 w-4 text-orange-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              <Money value={viewData.total} />
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.highestExpense')}
-            </CardTitle>
-            <div className="rounded-full bg-amber-500/10 p-1.5">
-              <TriangleAlert className="h-4 w-4 text-amber-500" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-sm font-medium">
-              {viewData.highest?.category || '-'}
-            </div>
-            <div className="text-xs text-muted-foreground">
-              {viewData.highest ? (
-                <Money value={viewData.highest.value} />
-              ) : (
-                '-'
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-1 pt-3 px-4">
-            <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t('cards.average')}
-            </CardTitle>
-            <div className="rounded-full bg-blue-500/10 p-1.5">
-              <Building2 className="h-4 w-4 text-blue-600" />
-            </div>
-          </CardHeader>
-          <CardContent className="pb-3 pt-0 px-4">
-            <div className="text-xl font-bold">
-              <Money value={viewData.average} />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+      <KpiCardsGrid items={summaryCards} columns={3} />
 
       <div className="grid gap-3 xl:grid-cols-5">
         <Card className="xl:col-span-3">
@@ -366,12 +348,12 @@ export default function TopOperationalExpensesReportPage() {
         </Card>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>{t('table.description')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <FinancePageSection
+        title={t('table.title')}
+        description={t('table.description')}
+        contentClassName="p-4 sm:p-5"
+      >
+        <div className="overflow-x-auto">
           <Table>
             <TableHeader>
               <TableRow>
@@ -418,8 +400,8 @@ export default function TopOperationalExpensesReportPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+        </div>
+      </FinancePageSection>
     </Page>
   );
 }

package/hedhog/frontend/messages/en.json

@@ -130,11 +130,12 @@
         "actions": "Actions"
       }
     },
-    "empty": {
-      "title": "All good!",
-      "description": "There are no pending approvals."
-    }
-  },
+    "empty": {
+      "title": "All good!",
+      "description": "There are no pending approvals.",
+      "refresh": "Refresh"
+    }
+  },
   "PersonFieldWithCreate": {
     "sheet": {
       "title": "New {entityLabel}",
@@ -269,33 +270,71 @@
       "cash": "Cash",
       "check": "Check"
     },
-    "header": {
-      "title": "Payable Titles",
-      "description": "Manage your accounts payable"
-    },
-    "breadcrumbs": {
-      "home": "Home",
-      "finance": "Finance",
-      "current": "Payable Titles"
-    },
+    "header": {
+      "title": "Payable Titles",
+      "description": "Manage your accounts payable"
+    },
+    "summary": {
+      "cards": {
+        "visible": {
+          "title": "Visible titles",
+          "description": "{total} records in total"
+        },
+        "value": {
+          "title": "Visible value",
+          "description": "Sum of the current page"
+        },
+        "attention": {
+          "title": "Pending",
+          "description": "{overdue} overdue"
+        }
+      }
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Payable Titles"
+    },
     "filters": {
       "searchPlaceholder": "Search by document or supplier...",
       "status": "Status"
     },
-    "statuses": {
-      "all": "All",
-      "rascunho": "Draft",
-      "aprovado": "Approved",
-      "aberto": "Open",
+    "statuses": {
+      "all": "All",
+      "rascunho": "Draft",
+      "aprovado": "Approved",
+      "aberto": "Open",
       "parcial": "Partial",
       "liquidado": "Settled",
-      "vencido": "Overdue",
-      "cancelado": "Canceled"
-    },
-    "table": {
-      "headers": {
-        "document": "Document",
-        "supplier": "Supplier",
+      "vencido": "Overdue",
+      "cancelado": "Canceled"
+    },
+    "list": {
+      "title": "Title portfolio",
+      "description": "Track documents, due dates, and operational actions for the current page."
+    },
+    "sections": {
+      "main": {
+        "title": "Main data",
+        "description": "Provide document, supplier, dates, and the total title amount."
+      },
+      "installments": {
+        "title": "Installments",
+        "description": "Review the due schedule and adjust installment amounts before saving."
+      },
+      "classification": {
+        "title": "Financial classification",
+        "description": "Assign category, cost center, and payment method to organize the operation."
+      },
+      "notes": {
+        "title": "Notes",
+        "description": "Use this field to add extra context to the title when needed."
+      }
+    },
+    "table": {
+      "headers": {
+        "document": "Document",
+        "supplier": "Supplier",
         "competency": "Competency",
         "dueDate": "Due Date",
         "value": "Value",
@@ -333,12 +372,18 @@
         "confirm": "Confirm reversal"
       }
     },
-    "settleSheet": {
-      "title": "Register settlement",
-      "description": "Provide installment and settlement amount for title {document}.",
-      "installmentLabel": "Installment",
-      "installmentPlaceholder": "Select",
-      "installmentOption": "Installment {number} - open amount: {amount}",
+    "settleSheet": {
+      "title": "Register settlement",
+      "description": "Provide installment and settlement amount for title {document}.",
+      "sections": {
+        "payment": {
+          "title": "Settlement data",
+          "description": "Choose the available installment and confirm the amount to settle."
+        }
+      },
+      "installmentLabel": "Installment",
+      "installmentPlaceholder": "Select",
+      "installmentOption": "Installment {number} - open amount: {amount}",
       "amountLabel": "Amount",
       "descriptionLabel": "Description (optional)",
       "confirm": "Confirm settlement"
@@ -671,31 +716,69 @@
       "card": "Card",
       "transfer": "Transfer"
     },
-    "header": {
-      "title": "Receivable Titles",
-      "description": "Manage your accounts receivable"
-    },
-    "breadcrumbs": {
-      "home": "Home",
-      "finance": "Finance",
-      "current": "Receivable Titles"
+    "header": {
+      "title": "Receivable Titles",
+      "description": "Manage your accounts receivable"
+    },
+    "summary": {
+      "cards": {
+        "visible": {
+          "title": "Visible titles",
+          "description": "{total} records in total"
+        },
+        "value": {
+          "title": "Visible value",
+          "description": "Sum of the current page"
+        },
+        "attention": {
+          "title": "Pending",
+          "description": "{overdue} overdue"
+        }
+      }
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Receivable Titles"
     },
     "filters": {
       "searchPlaceholder": "Search by document or client...",
       "status": "Status"
     },
-    "statuses": {
-      "all": "All",
-      "aberto": "Open",
-      "parcial": "Partial",
-      "liquidado": "Settled",
-      "vencido": "Overdue",
-      "cancelado": "Canceled"
-    },
-    "table": {
-      "headers": {
-        "document": "Document",
-        "client": "Client",
+    "statuses": {
+      "all": "All",
+      "aberto": "Open",
+      "parcial": "Partial",
+      "liquidado": "Settled",
+      "vencido": "Overdue",
+      "cancelado": "Canceled"
+    },
+    "list": {
+      "title": "Receivables portfolio",
+      "description": "Track clients, due dates, and operational actions for the current page."
+    },
+    "sections": {
+      "main": {
+        "title": "Main data",
+        "description": "Provide document, client, dates, and the total title amount."
+      },
+      "installments": {
+        "title": "Installments",
+        "description": "Review the due schedule and adjust installment amounts before saving."
+      },
+      "classification": {
+        "title": "Financial classification",
+        "description": "Assign category, cost center, and receiving channel to organize the operation."
+      },
+      "notes": {
+        "title": "Notes",
+        "description": "Use this field to add extra context to the title when needed."
+      }
+    },
+    "table": {
+      "headers": {
+        "document": "Document",
+        "client": "Client",
         "competency": "Competency",
         "dueDate": "Due Date",
         "value": "Value",
@@ -710,15 +793,20 @@
         "sendCollection": "Send Collection",
         "openAttachment": "Open attachment"
       }
-    },
-    "installmentsEditor": {
-      "title": "Installments",
-      "countLabel": "Installments Count",
-      "recalculate": "Recalculate automatically",
-      "autoRedistributeLabel": "Automatically redistribute remaining amount when editing installment",
-      "dueDateLabel": "Due date",
-      "amountLabel": "Amount",
-      "totalPrefix": "Installments total: {total}",
+    },
+    "empty": {
+      "title": "No titles found",
+      "description": "Create the first title to start managing accounts receivable."
+    },
+    "installmentsEditor": {
+      "title": "Installments",
+      "countLabel": "Installments Count",
+      "recalculate": "Recalculate automatically",
+      "autoRedistributeLabel": "Automatically redistribute remaining amount when editing installment",
+      "autoRedistributeHint": "Redistribution occurs after typing stops and on field blur.",
+      "dueDateLabel": "Due date",
+      "amountLabel": "Amount",
+      "totalPrefix": "Installments total: {total}",
       "adjustmentNeeded": "(adjustment needed)"
     },
     "editTitle": {
@@ -920,13 +1008,33 @@
       "finance": "Finance",
       "current": "Bank Accounts"
     },
-    "cards": {
-      "totalBalance": "Total Balance",
-      "activeAccounts": "{count} active accounts",
-      "reconciledBalance": "Reconciled Balance",
-      "difference": "Difference"
-    },
-    "status": { "inactive": "Inactive" },
+    "cards": {
+      "totalBalance": "Total Balance",
+      "activeAccounts": "{count} active accounts",
+      "reconciledBalance": "Reconciled Balance",
+      "difference": "Difference",
+      "accountsOverview": "Active accounts",
+      "inactiveAccounts": "{count} inactive accounts"
+    },
+    "sections": {
+      "accountData": {
+        "title": "Account details",
+        "description": "Fill in the main information used to identify and classify the bank account."
+      },
+      "logo": {
+        "title": "Logo and visual identity",
+        "description": "Add an optional image to make the account easier to recognize across lists."
+      }
+    },
+    "list": {
+      "title": "Registered accounts",
+      "description": "Track balances, reconciliation, and quick actions for each bank account."
+    },
+    "empty": {
+      "title": "No bank accounts registered",
+      "description": "Create your first account to start tracking balances, statements, and reconciliations."
+    },
+    "status": { "inactive": "Inactive" },
     "accountCard": {
       "bankAccount": "Br: {agency} | Ac: {account}",
       "currentBalance": "Current Balance",