@hed-hog/finance 0.0.278 → 0.0.285

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

@@ -0,0 +1,433 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Building2, CircleDollarSign, TriangleAlert } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { type FormEvent, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  getDefaultDateRange,
+  type GroupBy,
+  useTopOperationalExpensesReport,
+} from '../_lib/use-finance-reports';
+
+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 handleSubmitFilters = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setAppliedFilters(filters);
+  };
+
+  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;
+    }
+
+    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>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+      />
+
+      <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-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>
+
+      <div className="grid gap-3 xl:grid-cols-5">
+        <Card className="xl:col-span-3">
+          <CardHeader className="pb-3">
+            <CardTitle>{t('bars.title')}</CardTitle>
+            <CardDescription>{t('bars.description')}</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={360}>
+              <BarChart
+                data={viewData.topExpenses}
+                layout="vertical"
+                margin={{ left: 60, right: 16 }}
+              >
+                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                <XAxis
+                  type="number"
+                  tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+                />
+                <YAxis dataKey="label" type="category" width={190} />
+                <Tooltip
+                  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 className="pb-3">
+            <CardTitle>{t('pie.title')}</CardTitle>
+            <CardDescription>{t('pie.description')}</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-4 pt-0">
+            <ResponsiveContainer width="100%" height={340}>
+              <PieChart>
+                <Pie
+                  data={viewData.pieData}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={55}
+                  outerRadius={100}
+                  paddingAngle={2}
+                  cy="42%"
+                >
+                  {viewData.pieData.map((entry, index) => (
+                    <Cell
+                      key={entry.name}
+                      fill={rankingColors[index % rankingColors.length]}
+                      stroke="hsl(var(--background))"
+                      strokeWidth={1}
+                    />
+                  ))}
+                </Pie>
+                <Legend
+                  iconType="circle"
+                  verticalAlign="bottom"
+                  wrapperStyle={{
+                    fontSize: 12,
+                    lineHeight: '20px',
+                    paddingTop: 12,
+                  }}
+                />
+                <Tooltip cursor={false} content={renderSolidTooltip} />
+              </PieChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>{t('table.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.category')}</TableHead>
+                <TableHead>{t('table.headers.costCenter')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.participation')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {viewData.topExpenses.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={4}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                viewData.topExpenses.map((item) => {
+                  const participation =
+                    viewData.total > 0
+                      ? (item.value / viewData.total) * 100
+                      : 0;
+
+                  return (
+                    <TableRow key={item.category}>
+                      <TableCell>{item.category}</TableCell>
+                      <TableCell>{item.costCenter}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={item.value} />
+                      </TableCell>
+                      <TableCell className="text-right">
+                        {participation.toFixed(2)}%
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}

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"
@@ -1582,5 +1595,171 @@
       "negative": "Negative",
       "withGrowth": "With growth of {value}%"
     }
+  },
+  "OverviewResultsReportPage": {
+    "header": {
+      "title": "Results Overview",
+      "description": "Compare revenue and expenses in the selected period"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Results Overview"
+    },
+    "filters": {
+      "title": "Filters",
+      "description": "Set period and grouping for analysis",
+      "from": "From",
+      "to": "To",
+      "groupBy": "Group by"
+    },
+    "groupBy": {
+      "day": "Day",
+      "week": "Week",
+      "month": "Month",
+      "year": "Year"
+    },
+    "cards": {
+      "revenue": "Revenue",
+      "expensesAndLoans": "Expenses + Loans",
+      "resultDifference": "Result Difference",
+      "margin": "Margin"
+    },
+    "status": {
+      "positive": "Positive Result",
+      "negative": "Negative Result"
+    },
+    "chart": {
+      "title": "Results Comparison",
+      "description": "Result evolution by grouped period",
+      "revenueLabel": "Revenue",
+      "expensesLabel": "Expenses + Loans",
+      "differenceLabel": "Difference"
+    },
+    "table": {
+      "title": "Period Summary",
+      "description": "Consolidated detail for selected range",
+      "headers": {
+        "period": "Period",
+        "revenue": "Revenue",
+        "expensesAndLoans": "Expenses + Loans",
+        "investorContribution": "Investor Contribution",
+        "difference": "Difference"
+      },
+      "empty": "No data found for selected filters"
+    }
+  },
+  "TopCustomersReportPage": {
+    "header": {
+      "title": "Top Customers",
+      "description": "Customer ranking for the selected period"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Top Customers"
+    },
+    "filters": {
+      "title": "Filters",
+      "description": "Select period and grouping level",
+      "from": "From",
+      "to": "To",
+      "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",
+      "week": "Week",
+      "month": "Month",
+      "year": "Year"
+    },
+    "cards": {
+      "total": "Total in Period",
+      "top5Concentration": "Top 5 Concentration",
+      "leader": "Leading Customer"
+    },
+    "bars": {
+      "title": "Top 20 Customers",
+      "description": "Revenue ranking in selected period"
+    },
+    "pie": {
+      "title": "Revenue Share",
+      "description": "Distribution among customers"
+    },
+    "table": {
+      "title": "Share Table",
+      "description": "Individual customer contribution",
+      "headers": {
+        "customer": "Customer",
+        "value": "Value",
+        "participation": "Share"
+      },
+      "empty": "No customers found for selected filters"
+    }
+  },
+  "TopOperationalExpensesReportPage": {
+    "header": {
+      "title": "Top Operational Expenses",
+      "description": "Track the most relevant expenses by category"
+    },
+    "breadcrumbs": {
+      "home": "Home",
+      "finance": "Finance",
+      "current": "Top Operational Expenses"
+    },
+    "filters": {
+      "title": "Filters",
+      "description": "Select period and grouping level",
+      "from": "From",
+      "to": "To",
+      "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",
+      "week": "Week",
+      "month": "Month",
+      "year": "Year"
+    },
+    "cards": {
+      "total": "Total Expenses",
+      "highestExpense": "Highest Expense",
+      "average": "Average (Top 20)"
+    },
+    "bars": {
+      "title": "Top 20 Expenses",
+      "description": "Largest values by category"
+    },
+    "pie": {
+      "title": "Cost Center Composition",
+      "description": "Operational expense distribution"
+    },
+    "table": {
+      "title": "Expenses Table",
+      "description": "Detail by category and cost center",
+      "headers": {
+        "category": "Category",
+        "costCenter": "Cost Center",
+        "value": "Value",
+        "participation": "Share"
+      },
+      "empty": "No expenses found for selected filters"
+    }
   }
 }