@hed-hog/finance 0.0.279 → 0.0.285

package/hedhog/frontend/app/reports/overview-results/page.tsx.ejs

@@ -28,8 +28,9 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Target, TrendingDown, TrendingUp } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
+import type { TooltipProps } from 'recharts';
 import {
   CartesianGrid,
   Legend,
@@ -41,51 +42,72 @@ import {
   YAxis,
 } from 'recharts';
 import {
-  aggregateOverview,
+  formatReportBucketLabel,
   getDefaultDateRange,
-} from '../_lib/report-aggregations';
-import { type GroupBy } from '../_lib/report-mocks';
+  type GroupBy,
+  useOverviewResultsReport,
+} from '../_lib/use-finance-reports';
+
+const LINE_COLORS = {
+  faturamento: '#2563eb',
+  despesasEmprestimos: '#ea580c',
+  diferenca: '#16a34a',
+};
+
+const currencyFormatter = new Intl.NumberFormat('pt-BR', {
+  style: 'currency',
+  currency: 'BRL',
+});
+
+function renderSolidTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<number, string>) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-lg border bg-popover px-3 py-2 shadow-xl text-popover-foreground text-sm">
+      <p className="mb-1 font-semibold text-popover-foreground">{label}</p>
+      {payload.map((entry) => (
+        <div key={entry.dataKey} className="flex items-center gap-2 py-0.5">
+          <span
+            className="inline-block h-2.5 w-2.5 rounded-sm shrink-0"
+            style={{ background: entry.color }}
+          />
+          <span className="text-muted-foreground">{entry.name}:</span>
+          <span className="font-semibold text-popover-foreground">
+            {typeof entry.value === 'number'
+              ? currencyFormatter.format(entry.value)
+              : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export default function OverviewResultsReportPage() {
   const t = useTranslations('finance.OverviewResultsReportPage');
+  const locale = useLocale();
   const defaults = getDefaultDateRange();
   const [from, setFrom] = useState(defaults.from);
   const [to, setTo] = useState(defaults.to);
   const [groupBy, setGroupBy] = useState<GroupBy>('year');
+  const { data } = useOverviewResultsReport({
+    from,
+    to,
+    groupBy,
+  });
 
   const rows = useMemo(
     () =>
-      aggregateOverview({
-        from,
-        to,
-        groupBy,
-      }),
-    [from, to, groupBy]
+      data.rows.map((row) => ({
+        ...row,
+        label: formatReportBucketLabel(row.period, groupBy, locale),
+      })),
+    [data.rows, groupBy, locale]
   );
-
-  const totals = useMemo(() => {
-    const faturamento = rows.reduce((acc, row) => acc + row.faturamento, 0);
-    const despesasEmprestimos = rows.reduce(
-      (acc, row) => acc + row.despesasEmprestimos,
-      0
-    );
-    const diferenca = faturamento - despesasEmprestimos;
-    const aporteInvestidor = rows.reduce(
-      (acc, row) => acc + row.aporteInvestidor,
-      0
-    );
-
-    const margem =
-      faturamento > 0 ? (diferenca / Math.abs(faturamento)) * 100 : 0;
-
-    return {
-      faturamento,
-      despesasEmprestimos,
-      diferenca,
-      aporteInvestidor,
-      margem,
-    };
-  }, [rows]);
+  const totals = data.totals;
 
   return (
     <Page>
@@ -145,49 +167,57 @@ export default function OverviewResultsReportPage() {
         </CardContent>
       </Card>
 
-      <div className="grid gap-4 md:grid-cols-4">
+      <div className="grid gap-3 md:grid-cols-4">
         <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.revenue')}
             </CardTitle>
-            <TrendingUp className="h-4 w-4 text-blue-600" />
+            <div className="rounded-full bg-blue-500/10 p-1.5">
+              <TrendingUp className="h-4 w-4 text-blue-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
               <Money value={totals.faturamento} />
             </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.expensesAndLoans')}
             </CardTitle>
-            <TrendingDown className="h-4 w-4 text-orange-600" />
+            <div className="rounded-full bg-orange-500/10 p-1.5">
+              <TrendingDown className="h-4 w-4 text-orange-600" />
+            </div>
           </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">
               <Money value={totals.despesasEmprestimos} />
             </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.resultDifference')}
             </CardTitle>
-            {totals.diferenca >= 0 ? (
-              <TrendingUp className="h-4 w-4 text-green-600" />
-            ) : (
-              <TrendingDown className="h-4 w-4 text-red-600" />
-            )}
+            <div
+              className={`rounded-full p-1.5 ${totals.diferenca >= 0 ? 'bg-green-500/10' : 'bg-red-500/10'}`}
+            >
+              {totals.diferenca >= 0 ? (
+                <TrendingUp className="h-4 w-4 text-green-600" />
+              ) : (
+                <TrendingDown className="h-4 w-4 text-red-600" />
+              )}
+            </div>
           </CardHeader>
-          <CardContent>
+          <CardContent className="pb-3 pt-0 px-4">
             <div
-              className={`text-2xl font-bold ${totals.diferenca >= 0 ? 'text-green-600' : 'text-red-600'}`}
+              className={`text-xl font-bold ${totals.diferenca >= 0 ? 'text-green-600' : 'text-red-600'}`}
             >
               <Money value={totals.diferenca} showSign />
             </div>
@@ -195,18 +225,18 @@ export default function OverviewResultsReportPage() {
         </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.margin')}
             </CardTitle>
-            <Target className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {totals.margem.toFixed(1)}%
+            <div className="rounded-full bg-violet-500/10 p-1.5">
+              <Target className="h-4 w-4 text-violet-600" />
             </div>
+          </CardHeader>
+          <CardContent className="pb-3 pt-0 px-4">
+            <div className="text-xl font-bold">{totals.margem.toFixed(1)}%</div>
             <Badge
-              className="mt-2"
+              className="mt-1"
               variant={totals.margem >= 0 ? 'default' : 'destructive'}
             >
               {totals.margem >= 0 ? t('status.positive') : t('status.negative')}
@@ -229,25 +259,13 @@ export default function OverviewResultsReportPage() {
                 tick={{ fontSize: 12 }}
                 tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
               />
-              <Tooltip
-                formatter={(value: number) =>
-                  new Intl.NumberFormat('pt-BR', {
-                    style: 'currency',
-                    currency: 'BRL',
-                  }).format(value)
-                }
-                contentStyle={{
-                  backgroundColor: 'hsl(var(--background))',
-                  border: '1px solid hsl(var(--border))',
-                  borderRadius: '8px',
-                }}
-              />
+              <Tooltip content={renderSolidTooltip} />
               <Legend />
               <Line
                 type="monotone"
                 dataKey="faturamento"
                 name={t('chart.revenueLabel')}
-                stroke="hsl(var(--chart-1))"
+                stroke={LINE_COLORS.faturamento}
                 strokeWidth={3}
                 dot={false}
               />
@@ -255,7 +273,7 @@ export default function OverviewResultsReportPage() {
                 type="monotone"
                 dataKey="despesasEmprestimos"
                 name={t('chart.expensesLabel')}
-                stroke="hsl(var(--chart-5))"
+                stroke={LINE_COLORS.despesasEmprestimos}
                 strokeWidth={3}
                 dot={false}
               />
@@ -263,7 +281,7 @@ export default function OverviewResultsReportPage() {
                 type="monotone"
                 dataKey="diferenca"
                 name={t('chart.differenceLabel')}
-                stroke="hsl(var(--chart-2))"
+                stroke={LINE_COLORS.diferenca}
                 strokeWidth={2}
                 strokeDasharray="6 4"
                 dot={false}