@hed-hog/finance 0.0.276 → 0.0.279

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

@@ -0,0 +1,318 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  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,
+  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 { useMemo, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  Cell,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import {
+  aggregateOperationalExpenses,
+  getDefaultDateRange,
+} from '../_lib/report-aggregations';
+import { type GroupBy } from '../_lib/report-mocks';
+
+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',
+];
+
+export default function TopOperationalExpensesReportPage() {
+  const t = useTranslations('finance.TopOperationalExpensesReportPage');
+  const defaults = getDefaultDateRange();
+
+  const [from, setFrom] = useState(defaults.from);
+  const [to, setTo] = useState(defaults.to);
+  const [groupBy, setGroupBy] = useState<GroupBy>('year');
+
+  const data = useMemo(
+    () =>
+      aggregateOperationalExpenses({
+        from,
+        to,
+        groupBy,
+        topN: 20,
+      }),
+    [from, to, groupBy]
+  );
+
+  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 (
+    <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') },
+        ]}
+      />
+
+      <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>
+
+      <div className="grid gap-4 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">
+              {t('cards.total')}
+            </CardTitle>
+            <CircleDollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={data.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">
+              {t('cards.highestExpense')}
+            </CardTitle>
+            <TriangleAlert className="h-4 w-4 text-amber-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-lg font-semibold">
+              {highest?.category || '-'}
+            </div>
+            <div className="text-muted-foreground text-sm">
+              {highest ? <Money value={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">
+              {t('cards.average')}
+            </CardTitle>
+            <Building2 className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={average} />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 xl:grid-cols-5">
+        <Card className="xl:col-span-3">
+          <CardHeader>
+            <CardTitle>{t('bars.title')}</CardTitle>
+            <CardDescription>{t('bars.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={560}>
+              <BarChart
+                data={[...data.topExpenses].reverse()}
+                layout="vertical"
+                margin={{ left: 80, right: 16 }}
+              >
+                <XAxis
+                  type="number"
+                  tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+                />
+                <YAxis dataKey="category" type="category" width={210} />
+                <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))"
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="xl:col-span-2">
+          <CardHeader>
+            <CardTitle>{t('pie.title')}</CardTitle>
+            <CardDescription>{t('pie.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveContainer width="100%" height={380}>
+              <PieChart>
+                <Pie
+                  data={data.pieData}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={65}
+                  outerRadius={120}
+                  paddingAngle={2}
+                >
+                  {data.pieData.map((entry, index) => (
+                    <Cell
+                      key={entry.name}
+                      fill={pieColors[index % pieColors.length]}
+                    />
+                  ))}
+                </Pie>
+                <Tooltip
+                  formatter={(value: number) =>
+                    new Intl.NumberFormat('pt-BR', {
+                      style: 'currency',
+                      currency: 'BRL',
+                    }).format(value)
+                  }
+                />
+              </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>
+              {data.topExpenses.length === 0 ? (
+                <TableRow>
+                  <TableCell
+                    colSpan={4}
+                    className="text-muted-foreground text-center"
+                  >
+                    {t('table.empty')}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                data.topExpenses.map((item) => {
+                  const participation =
+                    data.total > 0 ? (item.value / data.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

@@ -1582,5 +1582,153 @@
       "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"
+    },
+    "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"
+    },
+    "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"
+    }
   }
 }

package/hedhog/frontend/messages/pt.json

@@ -1582,5 +1582,153 @@
       "negative": "Negativo",
       "withGrowth": "Com crescimento de {value}%"
     }
+  },
+  "OverviewResultsReportPage": {
+    "header": {
+      "title": "Visão Geral dos Resultados",
+      "description": "Compare faturamento e despesas no período selecionado"
+    },
+    "breadcrumbs": {
+      "home": "Início",
+      "finance": "Financeiro",
+      "current": "Visão Geral dos Resultados"
+    },
+    "filters": {
+      "title": "Filtros",
+      "description": "Defina período e agrupamento para análise",
+      "from": "Data de",
+      "to": "Data até",
+      "groupBy": "Agrupar por"
+    },
+    "groupBy": {
+      "day": "Dia",
+      "week": "Semana",
+      "month": "Mês",
+      "year": "Ano"
+    },
+    "cards": {
+      "revenue": "Faturamento",
+      "expensesAndLoans": "Despesas + Empréstimos",
+      "resultDifference": "Diferença de Resultado",
+      "margin": "Margem"
+    },
+    "status": {
+      "positive": "Resultado Positivo",
+      "negative": "Resultado Negativo"
+    },
+    "chart": {
+      "title": "Comparativo de Resultados",
+      "description": "Evolução do resultado por período agrupado",
+      "revenueLabel": "Faturamento",
+      "expensesLabel": "Despesas + Empréstimos",
+      "differenceLabel": "Diferença"
+    },
+    "table": {
+      "title": "Resumo por Período",
+      "description": "Detalhamento consolidado do intervalo selecionado",
+      "headers": {
+        "period": "Período",
+        "revenue": "Faturamento",
+        "expensesAndLoans": "Despesas + Empréstimos",
+        "investorContribution": "Aporte Investidor",
+        "difference": "Diferença"
+      },
+      "empty": "Nenhum dado encontrado para os filtros selecionados"
+    }
+  },
+  "TopCustomersReportPage": {
+    "header": {
+      "title": "Principais Clientes",
+      "description": "Ranking de clientes do período selecionado"
+    },
+    "breadcrumbs": {
+      "home": "Início",
+      "finance": "Financeiro",
+      "current": "Principais Clientes"
+    },
+    "filters": {
+      "title": "Filtros",
+      "description": "Selecione o período e o nível de agrupamento",
+      "from": "Data de",
+      "to": "Data até",
+      "groupBy": "Agrupar por"
+    },
+    "groupBy": {
+      "day": "Dia",
+      "week": "Semana",
+      "month": "Mês",
+      "year": "Ano"
+    },
+    "cards": {
+      "total": "Total no Período",
+      "top5Concentration": "Concentração Top 5",
+      "leader": "Cliente Líder"
+    },
+    "bars": {
+      "title": "Top 20 Clientes",
+      "description": "Ranking por faturamento no período"
+    },
+    "pie": {
+      "title": "Participação na Receita",
+      "description": "Distribuição entre clientes"
+    },
+    "table": {
+      "title": "Tabela de Participação",
+      "description": "Contribuição individual por cliente",
+      "headers": {
+        "customer": "Cliente",
+        "value": "Valor",
+        "participation": "Participação"
+      },
+      "empty": "Nenhum cliente encontrado para os filtros selecionados"
+    }
+  },
+  "TopOperationalExpensesReportPage": {
+    "header": {
+      "title": "Principais Gastos Operacionais",
+      "description": "Acompanhe os gastos mais relevantes por categoria"
+    },
+    "breadcrumbs": {
+      "home": "Início",
+      "finance": "Financeiro",
+      "current": "Principais Gastos Operacionais"
+    },
+    "filters": {
+      "title": "Filtros",
+      "description": "Selecione o período e o nível de agrupamento",
+      "from": "Data de",
+      "to": "Data até",
+      "groupBy": "Agrupar por"
+    },
+    "groupBy": {
+      "day": "Dia",
+      "week": "Semana",
+      "month": "Mês",
+      "year": "Ano"
+    },
+    "cards": {
+      "total": "Total de Gastos",
+      "highestExpense": "Maior Gasto",
+      "average": "Média (Top 20)"
+    },
+    "bars": {
+      "title": "Top 20 Gastos",
+      "description": "Maiores valores por categoria"
+    },
+    "pie": {
+      "title": "Composição por Centro de Custo",
+      "description": "Distribuição dos gastos operacionais"
+    },
+    "table": {
+      "title": "Tabela de Gastos",
+      "description": "Detalhamento por categoria e centro de custo",
+      "headers": {
+        "category": "Categoria",
+        "costCenter": "Centro de Custo",
+        "value": "Valor",
+        "participation": "Participação"
+      },
+      "empty": "Nenhum gasto encontrado para os filtros selecionados"
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.276",
+  "version": "0.0.279",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,14 +9,14 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/contact": "0.0.276",
-    "@hed-hog/api": "0.0.4",
+    "@hed-hog/tag": "0.0.279",
+    "@hed-hog/contact": "0.0.279",
     "@hed-hog/api-prisma": "0.0.5",
-    "@hed-hog/tag": "0.0.276",
+    "@hed-hog/api": "0.0.4",
     "@hed-hog/api-locale": "0.0.13",
+    "@hed-hog/core": "0.0.279",
     "@hed-hog/api-types": "0.0.1",
-    "@hed-hog/api-pagination": "0.0.6",
-    "@hed-hog/core": "0.0.276"
+    "@hed-hog/api-pagination": "0.0.6"
   },
   "exports": {
     ".": {