@hed-hog/finance 0.0.279 → 0.0.285

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

@@ -1,6 +1,7 @@
 'use client';
 
 import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -9,7 +10,6 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -28,11 +28,13 @@ import {
 } from '@/components/ui/table';
 import { Building2, CircleDollarSign, TriangleAlert } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { type FormEvent, useState } from 'react';
 import {
   Bar,
   BarChart,
+  CartesianGrid,
   Cell,
+  Legend,
   Pie,
   PieChart,
   ResponsiveContainer,
@@ -41,47 +43,93 @@ import {
   YAxis,
 } from 'recharts';
 import {
-  aggregateOperationalExpenses,
   getDefaultDateRange,
-} from '../_lib/report-aggregations';
-import { type GroupBy } from '../_lib/report-mocks';
+  type GroupBy,
+  useTopOperationalExpensesReport,
+} from '../_lib/use-finance-reports';
 
-const pieColors = [
-  'hsl(var(--chart-1))',
-  'hsl(var(--chart-2))',
-  'hsl(var(--chart-3))',
-  'hsl(var(--chart-4))',
-  'hsl(var(--chart-5))',
-  '#64748B',
-  '#0EA5E9',
-  '#22C55E',
+const rankingColors = [
+  '#2563EB',
+  '#DC2626',
+  '#059669',
+  '#D97706',
+  '#7C3AED',
+  '#0F766E',
+  '#BE123C',
+  '#1D4ED8',
 ];
 
+const currencyFormatter = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL',
+});
+
 export default function TopOperationalExpensesReportPage() {
   const t = useTranslations('finance.TopOperationalExpensesReportPage');
   const defaults = getDefaultDateRange();
+  const [filters, setFilters] = useState({
+    from: defaults.from,
+    to: defaults.to,
+    groupBy: 'year' as GroupBy,
+    search: '',
+  });
+  const [appliedFilters, setAppliedFilters] = useState(filters);
+  const { data: viewData, isFetching } = useTopOperationalExpensesReport({
+    from: appliedFilters.from,
+    to: appliedFilters.to,
+    groupBy: appliedFilters.groupBy,
+    search: appliedFilters.search,
+    topN: 20,
+  });
 
-  const [from, setFrom] = useState(defaults.from);
-  const [to, setTo] = useState(defaults.to);
-  const [groupBy, setGroupBy] = useState<GroupBy>('year');
+  const handleSubmitFilters = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setAppliedFilters(filters);
+  };
 
-  const data = useMemo(
-    () =>
-      aggregateOperationalExpenses({
-        from,
-        to,
-        groupBy,
-        topN: 20,
-      }),
-    [from, to, groupBy]
-  );
+  const renderSolidTooltip = ({
+    active,
+    payload,
+    label,
+  }: {
+    active?: boolean;
+    payload?: Array<{
+      name?: string;
+      value?: number | string;
+      color?: string;
+      dataKey?: string;
+    }>;
+    label?: string | number;
+  }) => {
+    if (!active || !payload || payload.length === 0) {
+      return null;
+    }
 
-  const highest = data.topExpenses[0];
-  const average =
-    data.topExpenses.length > 0
-      ? data.topExpenses.reduce((acc, item) => acc + item.value, 0) /
-        data.topExpenses.length
-      : 0;
+    return (
+      <div className="min-w-52 rounded-md border bg-popover px-3 py-2 shadow-xl">
+        <p className="mb-1 text-sm font-semibold text-popover-foreground">
+          {String(label ?? payload[0]?.name ?? '')}
+        </p>
+        {payload.map((row, index) => (
+          <div
+            key={`${row.dataKey ?? row.name ?? 'item'}-${index}`}
+            className="flex items-center justify-between gap-3 text-sm"
+          >
+            <div className="flex items-center gap-2 text-popover-foreground">
+              <span
+                className="inline-block h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: row.color || 'hsl(var(--chart-1))' }}
+              />
+              <span>{row.name ?? row.dataKey ?? 'Valor'}</span>
+            </div>
+            <span className="font-semibold text-popover-foreground">
+              {currencyFormatter.format(Number(row.value || 0))}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
 
   return (
     <Page>
@@ -95,166 +143,231 @@ export default function TopOperationalExpensesReportPage() {
         ]}
       />
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('filters.title')}</CardTitle>
-          <CardDescription>{t('filters.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4 md:grid-cols-3">
-          <div className="space-y-2">
-            <Label htmlFor="from">{t('filters.from')}</Label>
-            <Input
-              id="from"
-              type="date"
-              value={from}
-              onChange={(event) => setFrom(event.target.value)}
-              max={to}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="to">{t('filters.to')}</Label>
-            <Input
-              id="to"
-              type="date"
-              value={to}
-              onChange={(event) => setTo(event.target.value)}
-              min={from}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label>{t('filters.groupBy')}</Label>
-            <Select
-              value={groupBy}
-              onValueChange={(value) => setGroupBy(value as GroupBy)}
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="day">{t('groupBy.day')}</SelectItem>
-                <SelectItem value="week">{t('groupBy.week')}</SelectItem>
-                <SelectItem value="month">{t('groupBy.month')}</SelectItem>
-                <SelectItem value="year">{t('groupBy.year')}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </CardContent>
-      </Card>
+      <form
+        onSubmit={handleSubmitFilters}
+        className="flex w-full flex-col gap-3 lg:flex-row"
+      >
+        <Input
+          type="search"
+          value={filters.search}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              search: event.target.value,
+            }))
+          }
+          placeholder={t('filters.searchPlaceholder')}
+          className="w-full lg:flex-[2.4]"
+          aria-label={t('filters.searchAria')}
+        />
+        <Input
+          id="from"
+          type="date"
+          value={filters.from}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              from: event.target.value,
+            }))
+          }
+          max={filters.to}
+          className="w-full lg:w-[170px]"
+          aria-label={t('filters.fromAria')}
+          placeholder={t('filters.fromPlaceholder')}
+        />
+        <Input
+          id="to"
+          type="date"
+          value={filters.to}
+          onChange={(event) =>
+            setFilters((current) => ({
+              ...current,
+              to: event.target.value,
+            }))
+          }
+          min={filters.from}
+          className="w-full lg:w-[170px]"
+          aria-label={t('filters.toAria')}
+          placeholder={t('filters.toPlaceholder')}
+        />
+        <Select
+          value={filters.groupBy}
+          onValueChange={(value) =>
+            setFilters((current) => ({
+              ...current,
+              groupBy: value as GroupBy,
+            }))
+          }
+        >
+          <SelectTrigger
+            className="w-full lg:w-[150px]"
+            aria-label={t('filters.groupByAria')}
+          >
+            <SelectValue placeholder={t('filters.groupByPlaceholder')} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="day">{t('groupBy.day')}</SelectItem>
+            <SelectItem value="week">{t('groupBy.week')}</SelectItem>
+            <SelectItem value="month">{t('groupBy.month')}</SelectItem>
+            <SelectItem value="year">{t('groupBy.year')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button
+          type="submit"
+          className="w-full lg:w-auto"
+          disabled={isFetching}
+        >
+          {t('filters.submit')}
+        </Button>
+      </form>
 
-      <div className="grid gap-4 md:grid-cols-3">
+      <div className="grid gap-3 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">
+          <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>
-            <CircleDollarSign className="h-4 w-4 text-muted-foreground" />
+            <div className="rounded-full bg-orange-500/10 p-1.5">
+              <CircleDollarSign className="h-4 w-4 text-orange-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={data.total} />
+          <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-2">
-            <CardTitle className="text-sm font-medium">
+          <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>
-            <TriangleAlert className="h-4 w-4 text-amber-500" />
+            <div className="rounded-full bg-amber-500/10 p-1.5">
+              <TriangleAlert className="h-4 w-4 text-amber-500" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-lg font-semibold">
-              {highest?.category || '-'}
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-sm font-medium">
+              {viewData.highest?.category || '-'}
             </div>
-            <div className="text-muted-foreground text-sm">
-              {highest ? <Money value={highest.value} /> : '-'}
+            <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-2">
-            <CardTitle className="text-sm font-medium">
+          <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>
-            <Building2 className="h-4 w-4 text-muted-foreground" />
+            <div className="rounded-full bg-blue-500/10 p-1.5">
+              <Building2 className="h-4 w-4 text-blue-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              <Money value={average} />
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
+              <Money value={viewData.average} />
             </div>
           </CardContent>
         </Card>
       </div>
 
-      <div className="grid gap-4 xl:grid-cols-5">
+      <div className="grid gap-3 xl:grid-cols-5">
         <Card className="xl:col-span-3">
-          <CardHeader>
+          <CardHeader className="pb-3">
             <CardTitle>{t('bars.title')}</CardTitle>
             <CardDescription>{t('bars.description')}</CardDescription>
           </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={560}>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={360}>
               <BarChart
-                data={[...data.topExpenses].reverse()}
+                data={viewData.topExpenses}
                 layout="vertical"
-                margin={{ left: 80, right: 16 }}
+                margin={{ left: 60, right: 16 }}
               >
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                 <XAxis
                   type="number"
                   tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
                 />
-                <YAxis dataKey="category" type="category" width={210} />
+                <YAxis dataKey="label" type="category" width={190} />
                 <Tooltip
-                  formatter={(value: number) =>
-                    new Intl.NumberFormat('pt-BR', {
-                      style: 'currency',
-                      currency: 'BRL',
-                    }).format(value)
-                  }
-                />
-                <Bar
-                  dataKey="value"
-                  radius={[0, 6, 6, 0]}
-                  fill="hsl(var(--chart-5))"
+                  cursor={{ fill: 'hsl(var(--muted) / 0.35)' }}
+                  content={renderSolidTooltip}
                 />
+                <Bar dataKey="value" radius={[0, 6, 6, 0]}>
+                  {viewData.topExpenses.map((entry, index) => (
+                    <Cell
+                      key={entry.label}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
+                    />
+                  ))}
+                </Bar>
               </BarChart>
             </ResponsiveContainer>
+            <div className="mt-4 grid grid-cols-2 gap-2 text-sm sm:grid-cols-3">
+              {viewData.topExpenses.slice(0, 6).map((item, index) => (
+                <div key={item.label} className="flex items-center gap-2">
+                  <span
+                    className="inline-block h-2.5 w-2.5 rounded-full"
+                    style={{
+                      backgroundColor:
+                        rankingColors[index % rankingColors.length],
+                    }}
+                  />
+                  <span className="truncate text-foreground/90">
+                    #{index + 1} {item.category}
+                  </span>
+                </div>
+              ))}
+            </div>
           </CardContent>
         </Card>
 
         <Card className="xl:col-span-2">
-          <CardHeader>
+          <CardHeader className="pb-3">
             <CardTitle>{t('pie.title')}</CardTitle>
             <CardDescription>{t('pie.description')}</CardDescription>
           </CardHeader>
-          <CardContent>
-            <ResponsiveContainer width="100%" height={380}>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={340}>
               <PieChart>
                 <Pie
-                  data={data.pieData}
+                  data={viewData.pieData}
                   dataKey="value"
                   nameKey="name"
-                  innerRadius={65}
-                  outerRadius={120}
+                  innerRadius={55}
+                  outerRadius={100}
                   paddingAngle={2}
+                  cy="42%"
                 >
-                  {data.pieData.map((entry, index) => (
+                  {viewData.pieData.map((entry, index) => (
                     <Cell
                       key={entry.name}
-                      fill={pieColors[index % pieColors.length]}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
                     />
                   ))}
                 </Pie>
-                <Tooltip
-                  formatter={(value: number) =>
-                    new Intl.NumberFormat('pt-BR', {
-                      style: 'currency',
-                      currency: 'BRL',
-                    }).format(value)
-                  }
+                <Legend
+                  iconType="circle"
+                  verticalAlign="bottom"
+                  wrapperStyle={{
+                    fontSize: 12,
+                    lineHeight: '20px',
+                    paddingTop: 12,
+                  }}
                 />
+                <Tooltip cursor={false} content={renderSolidTooltip} />
               </PieChart>
             </ResponsiveContainer>
           </CardContent>
@@ -281,7 +394,7 @@ export default function TopOperationalExpensesReportPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {data.topExpenses.length === 0 ? (
+              {viewData.topExpenses.length === 0 ? (
                 <TableRow>
                   <TableCell
                     colSpan={4}
@@ -291,9 +404,11 @@ export default function TopOperationalExpensesReportPage() {
                   </TableCell>
                 </TableRow>
               ) : (
-                data.topExpenses.map((item) => {
+                viewData.topExpenses.map((item) => {
                   const participation =
-                    data.total > 0 ? (item.value / data.total) * 100 : 0;
+                    viewData.total > 0
+                      ? (item.value / viewData.total) * 100
+                      : 0;
 
                   return (
                     <TableRow key={item.category}>

package/hedhog/frontend/messages/en.json

@@ -277,6 +277,10 @@
         "openAttachment": "Open attachment"
       }
     },
+    "empty": {
+      "title": "No titles found",
+      "description": "Create the first title to start managing accounts payable."
+    },
     "dialogs": {
       "cancel": {
         "title": "Confirm cancellation",
@@ -570,6 +574,11 @@
         "total": "Total",
         "actions": "Actions"
       }
+    },
+    "empty": {
+      "title": "No default data found",
+      "description": "There are no late clients for the current filters.",
+      "action": "Refresh data"
     }
   },
   "ReceivableInstallmentsPage": {
@@ -995,6 +1004,10 @@
         "reconciliation": "Reconciliation"
       }
     },
+    "empty": {
+      "title": "No transactions found",
+      "description": "Import a statement to view account transactions."
+    },
     "types": {
       "inflow": "Inflow",
       "outflow": "Outflow"
@@ -1651,7 +1664,16 @@
       "description": "Select period and grouping level",
       "from": "From",
       "to": "To",
-      "groupBy": "Group by"
+      "groupBy": "Group by",
+      "fromPlaceholder": "From date",
+      "toPlaceholder": "To date",
+      "groupByPlaceholder": "Group",
+      "searchPlaceholder": "Search customer, supplier, category...",
+      "fromAria": "Start date filter",
+      "toAria": "End date filter",
+      "groupByAria": "Grouping filter",
+      "searchAria": "Search filter by customer",
+      "submit": "Apply"
     },
     "groupBy": {
       "day": "Day",
@@ -1698,7 +1720,16 @@
       "description": "Select period and grouping level",
       "from": "From",
       "to": "To",
-      "groupBy": "Group by"
+      "groupBy": "Group by",
+      "fromPlaceholder": "From date",
+      "toPlaceholder": "To date",
+      "groupByPlaceholder": "Group",
+      "searchPlaceholder": "Search customer, supplier, category...",
+      "fromAria": "Start date filter",
+      "toAria": "End date filter",
+      "groupByAria": "Grouping filter",
+      "searchAria": "Search filter by category or cost center",
+      "submit": "Apply"
     },
     "groupBy": {
       "day": "Day",

package/hedhog/frontend/messages/pt.json

@@ -277,6 +277,10 @@
         "openAttachment": "Abrir anexo"
       }
     },
+    "empty": {
+      "title": "Nenhum título encontrado",
+      "description": "Cadastre o primeiro título para começar a gerenciar contas a pagar."
+    },
     "dialogs": {
       "cancel": {
         "title": "Confirmar cancelamento",
@@ -570,6 +574,11 @@
         "total": "Total",
         "actions": "Ações"
       }
+    },
+    "empty": {
+      "title": "Nenhum dado de inadimplência",
+      "description": "Não há clientes inadimplentes para os filtros atuais.",
+      "action": "Atualizar dados"
     }
   },
   "ReceivableInstallmentsPage": {
@@ -995,6 +1004,10 @@
         "reconciliation": "Conciliação"
       }
     },
+    "empty": {
+      "title": "Nenhuma movimentação encontrada",
+      "description": "Importe um extrato para visualizar as movimentações desta conta."
+    },
     "types": {
       "inflow": "Entrada",
       "outflow": "Saída"
@@ -1651,7 +1664,16 @@
       "description": "Selecione o período e o nível de agrupamento",
       "from": "Data de",
       "to": "Data até",
-      "groupBy": "Agrupar por"
+      "groupBy": "Agrupar por",
+      "fromPlaceholder": "Data de",
+      "toPlaceholder": "Data até",
+      "groupByPlaceholder": "Agrupar",
+      "searchPlaceholder": "Buscar cliente, fornecedor, categoria...",
+      "fromAria": "Filtro de data inicial",
+      "toAria": "Filtro de data final",
+      "groupByAria": "Filtro de agrupamento",
+      "searchAria": "Filtro de busca por cliente",
+      "submit": "Aplicar"
     },
     "groupBy": {
       "day": "Dia",
@@ -1698,7 +1720,16 @@
       "description": "Selecione o período e o nível de agrupamento",
       "from": "Data de",
       "to": "Data até",
-      "groupBy": "Agrupar por"
+      "groupBy": "Agrupar por",
+      "fromPlaceholder": "Data de",
+      "toPlaceholder": "Data até",
+      "groupByPlaceholder": "Agrupar",
+      "searchPlaceholder": "Buscar cliente, fornecedor, categoria...",
+      "fromAria": "Filtro de data inicial",
+      "toAria": "Filtro de data final",
+      "groupByAria": "Filtro de agrupamento",
+      "searchAria": "Filtro de busca por categoria ou centro de custo",
+      "submit": "Aplicar"
     },
     "groupBy": {
       "day": "Dia",