feat: adicionar página Top Estabelecimentos
- Criar página /top-estabelecimentos com análise de gastos por local - Adicionar componentes: establishments-list, highlights-cards, summary-cards - Adicionar filtro de período personalizado - Criar função de busca de dados para top estabelecimentos Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
58
app/(dashboard)/top-estabelecimentos/loading.tsx
Normal file
58
app/(dashboard)/top-estabelecimentos/loading.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
|
||||||
|
export default function Loading() {
|
||||||
|
return (
|
||||||
|
<main className="flex flex-col gap-4 px-6">
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<Skeleton className="h-4 w-64" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<Skeleton className="h-16 w-full" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2">
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 lg:grid-cols-3">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<Skeleton className="h-5 w-48" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
|
||||||
|
<Skeleton key={i} className="h-16 w-full" />
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<Skeleton className="h-5 w-40" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
{[1, 2, 3, 4, 5].map((i) => (
|
||||||
|
<Skeleton key={i} className="h-12 w-full" />
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
80
app/(dashboard)/top-estabelecimentos/page.tsx
Normal file
80
app/(dashboard)/top-estabelecimentos/page.tsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import { EstablishmentsList } from "@/components/top-estabelecimentos/establishments-list";
|
||||||
|
import { HighlightsCards } from "@/components/top-estabelecimentos/highlights-cards";
|
||||||
|
import { PeriodFilterButtons } from "@/components/top-estabelecimentos/period-filter";
|
||||||
|
import { SummaryCards } from "@/components/top-estabelecimentos/summary-cards";
|
||||||
|
import { TopCategories } from "@/components/top-estabelecimentos/top-categories";
|
||||||
|
import { getUser } from "@/lib/auth/server";
|
||||||
|
import {
|
||||||
|
fetchTopEstabelecimentosData,
|
||||||
|
type PeriodFilter,
|
||||||
|
} from "@/lib/top-estabelecimentos/fetch-data";
|
||||||
|
import { parsePeriodParam } from "@/lib/utils/period";
|
||||||
|
|
||||||
|
type PageSearchParams = Promise<Record<string, string | string[] | undefined>>;
|
||||||
|
|
||||||
|
type PageProps = {
|
||||||
|
searchParams?: PageSearchParams;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSingleParam = (
|
||||||
|
params: Record<string, string | string[] | undefined> | undefined,
|
||||||
|
key: string,
|
||||||
|
) => {
|
||||||
|
const value = params?.[key];
|
||||||
|
if (!value) return null;
|
||||||
|
return Array.isArray(value) ? (value[0] ?? null) : value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const validatePeriodFilter = (value: string | null): PeriodFilter => {
|
||||||
|
if (value === "3" || value === "6" || value === "12") {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
return "6";
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function TopEstabelecimentosPage({
|
||||||
|
searchParams,
|
||||||
|
}: PageProps) {
|
||||||
|
const user = await getUser();
|
||||||
|
const resolvedSearchParams = searchParams ? await searchParams : undefined;
|
||||||
|
const periodoParam = getSingleParam(resolvedSearchParams, "periodo");
|
||||||
|
const mesesParam = getSingleParam(resolvedSearchParams, "meses");
|
||||||
|
|
||||||
|
const { period: currentPeriod } = parsePeriodParam(periodoParam);
|
||||||
|
const periodFilter = validatePeriodFilter(mesesParam);
|
||||||
|
|
||||||
|
const data = await fetchTopEstabelecimentosData(
|
||||||
|
user.id,
|
||||||
|
currentPeriod,
|
||||||
|
periodFilter,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="@container/main flex flex-col gap-4 px-6">
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<h1 className="text-2xl font-semibold tracking-tight">
|
||||||
|
Top Estabelecimentos
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Análise dos locais onde você mais compra • {data.periodLabel}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<PeriodFilterButtons currentFilter={periodFilter} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SummaryCards summary={data.summary} />
|
||||||
|
|
||||||
|
<HighlightsCards summary={data.summary} />
|
||||||
|
|
||||||
|
<div className="grid gap-4 @3xl/main:grid-cols-3">
|
||||||
|
<div className="@3xl/main:col-span-2">
|
||||||
|
<EstablishmentsList establishments={data.establishments} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TopCategories categories={data.topCategories} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
138
components/top-estabelecimentos/establishments-list.tsx
Normal file
138
components/top-estabelecimentos/establishments-list.tsx
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import MoneyValues from "@/components/money-values";
|
||||||
|
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||||
|
import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
|
||||||
|
import { title_font } from "@/public/fonts/font_index";
|
||||||
|
import { RiStore2Line } from "@remixicon/react";
|
||||||
|
|
||||||
|
type EstablishmentsListProps = {
|
||||||
|
establishments: TopEstabelecimentosData["establishments"];
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildInitials = (value: string) => {
|
||||||
|
const parts = value.trim().split(/\s+/).filter(Boolean);
|
||||||
|
if (parts.length === 0) return "ES";
|
||||||
|
if (parts.length === 1) {
|
||||||
|
const firstPart = parts[0];
|
||||||
|
return firstPart ? firstPart.slice(0, 2).toUpperCase() : "ES";
|
||||||
|
}
|
||||||
|
const firstChar = parts[0]?.[0] ?? "";
|
||||||
|
const secondChar = parts[1]?.[0] ?? "";
|
||||||
|
return `${firstChar}${secondChar}`.toUpperCase() || "ES";
|
||||||
|
};
|
||||||
|
|
||||||
|
export function EstablishmentsList({
|
||||||
|
establishments,
|
||||||
|
}: EstablishmentsListProps) {
|
||||||
|
if (establishments.length === 0) {
|
||||||
|
return (
|
||||||
|
<Card className="h-full">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle
|
||||||
|
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||||
|
>
|
||||||
|
<RiStore2Line className="size-4 text-primary" />
|
||||||
|
Top Estabelecimentos
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<WidgetEmptyState
|
||||||
|
icon={<RiStore2Line className="size-6 text-muted-foreground" />}
|
||||||
|
title="Nenhum estabelecimento encontrado"
|
||||||
|
description="Quando houver compras registradas, elas aparecerão aqui."
|
||||||
|
/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const maxCount = Math.max(...establishments.map((e) => e.count));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="h-full">
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle
|
||||||
|
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||||
|
>
|
||||||
|
<RiStore2Line className="size-4 text-primary" />
|
||||||
|
Top Estabelecimentos por Frequência
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{establishments.map((establishment, index) => {
|
||||||
|
const initials = buildInitials(establishment.name);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={establishment.name}
|
||||||
|
className="flex flex-col py-2 border-b border-dashed last:border-0"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||||
|
{/* Rank number - same size as icon containers */}
|
||||||
|
<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
|
||||||
|
<span className="text-sm font-semibold text-muted-foreground">
|
||||||
|
{index + 1}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Name and categories */}
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<span className="text-sm font-medium truncate block">
|
||||||
|
{establishment.name}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-1 mt-0.5 flex-wrap">
|
||||||
|
{establishment.categories
|
||||||
|
.slice(0, 2)
|
||||||
|
.map((cat, catIndex) => (
|
||||||
|
<Badge
|
||||||
|
key={catIndex}
|
||||||
|
variant="secondary"
|
||||||
|
className="text-xs px-1.5 py-0 h-5"
|
||||||
|
>
|
||||||
|
{cat.name}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Value and stats */}
|
||||||
|
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||||
|
<MoneyValues
|
||||||
|
className="text-red-600 dark:text-red-500"
|
||||||
|
amount={establishment.totalAmount}
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{establishment.count}x • Média:{" "}
|
||||||
|
<MoneyValues
|
||||||
|
className="text-xs"
|
||||||
|
amount={establishment.avgAmount}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress bar */}
|
||||||
|
<div className="ml-12 mt-1.5">
|
||||||
|
<div className="h-1.5 bg-muted rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full bg-primary/50 rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${(establishment.count / maxCount) * 100}%`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
51
components/top-estabelecimentos/highlights-cards.tsx
Normal file
51
components/top-estabelecimentos/highlights-cards.tsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
|
||||||
|
import { RiTrophyLine, RiFireLine } from "@remixicon/react";
|
||||||
|
|
||||||
|
type HighlightsCardsProps = {
|
||||||
|
summary: TopEstabelecimentosData["summary"];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<Card className="bg-linear-to-br from-amber-50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/10 border-amber-200/50 dark:border-amber-800/30">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center size-10 rounded-xl bg-amber-100 dark:bg-amber-900/40 shadow-sm">
|
||||||
|
<RiTrophyLine className="size-5 text-amber-600 dark:text-amber-400" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-xs text-amber-700/80 dark:text-amber-400/80 font-medium">
|
||||||
|
Mais Frequente
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold text-amber-900 dark:text-amber-100 truncate">
|
||||||
|
{summary.mostFrequent || "—"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="bg-linear-to-br from-red-50 to-rose-50/50 dark:from-red-950/20 dark:to-rose-950/10 border-red-200/50 dark:border-red-800/30">
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex items-center justify-center size-10 rounded-xl bg-red-100 dark:bg-red-900/40 shadow-sm">
|
||||||
|
<RiFireLine className="size-5 text-red-600 dark:text-red-400" />
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium">
|
||||||
|
Maior Gasto Total
|
||||||
|
</p>
|
||||||
|
<p className="font-semibold text-red-900 dark:text-red-100 truncate">
|
||||||
|
{summary.highestSpending || "—"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
49
components/top-estabelecimentos/period-filter.tsx
Normal file
49
components/top-estabelecimentos/period-filter.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import type { PeriodFilter } from "@/lib/top-estabelecimentos/fetch-data";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
type PeriodFilterProps = {
|
||||||
|
currentFilter: PeriodFilter;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filterOptions: { value: PeriodFilter; label: string }[] = [
|
||||||
|
{ value: "3", label: "3 meses" },
|
||||||
|
{ value: "6", label: "6 meses" },
|
||||||
|
{ value: "12", label: "12 meses" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function PeriodFilterButtons({ currentFilter }: PeriodFilterProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const handleFilterChange = (filter: PeriodFilter) => {
|
||||||
|
const params = new URLSearchParams(searchParams.toString());
|
||||||
|
params.set("meses", filter);
|
||||||
|
router.push(`/top-estabelecimentos?${params.toString()}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-muted-foreground">Período:</span>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{filterOptions.map((option) => (
|
||||||
|
<Button
|
||||||
|
key={option.value}
|
||||||
|
variant={currentFilter === option.value ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleFilterChange(option.value)}
|
||||||
|
className={cn(
|
||||||
|
"h-8",
|
||||||
|
currentFilter === option.value && "pointer-events-none"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
78
components/top-estabelecimentos/summary-cards.tsx
Normal file
78
components/top-estabelecimentos/summary-cards.tsx
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import MoneyValues from "@/components/money-values";
|
||||||
|
import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
|
||||||
|
import {
|
||||||
|
RiStore2Line,
|
||||||
|
RiExchangeLine,
|
||||||
|
RiMoneyDollarCircleLine,
|
||||||
|
RiRepeatLine,
|
||||||
|
} from "@remixicon/react";
|
||||||
|
|
||||||
|
type SummaryCardsProps = {
|
||||||
|
summary: TopEstabelecimentosData["summary"];
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SummaryCards({ summary }: SummaryCardsProps) {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: "Estabelecimentos",
|
||||||
|
value: summary.totalEstablishments,
|
||||||
|
isMoney: false,
|
||||||
|
icon: RiStore2Line,
|
||||||
|
description: "Locais diferentes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Transações",
|
||||||
|
value: summary.totalTransactions,
|
||||||
|
isMoney: false,
|
||||||
|
icon: RiExchangeLine,
|
||||||
|
description: "Compras no período",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Total Gasto",
|
||||||
|
value: summary.totalSpent,
|
||||||
|
isMoney: true,
|
||||||
|
icon: RiMoneyDollarCircleLine,
|
||||||
|
description: "Soma de todas as compras",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Ticket Médio",
|
||||||
|
value: summary.avgPerTransaction,
|
||||||
|
isMoney: true,
|
||||||
|
icon: RiRepeatLine,
|
||||||
|
description: "Média por transação",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{cards.map((card) => (
|
||||||
|
<Card key={card.title}>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground">
|
||||||
|
{card.title}
|
||||||
|
</p>
|
||||||
|
{card.isMoney ? (
|
||||||
|
<MoneyValues
|
||||||
|
className="text-xl font-semibold"
|
||||||
|
amount={card.value}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className="text-xl font-semibold">{card.value}</p>
|
||||||
|
)}
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{card.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<card.icon className="size-5 text-muted-foreground shrink-0" />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
269
lib/top-estabelecimentos/fetch-data.ts
Normal file
269
lib/top-estabelecimentos/fetch-data.ts
Normal file
@@ -0,0 +1,269 @@
|
|||||||
|
import { lancamentos, pagadores, categorias, contas } from "@/db/schema";
|
||||||
|
import { db } from "@/lib/db";
|
||||||
|
import { PAGADOR_ROLE_ADMIN } from "@/lib/pagadores/constants";
|
||||||
|
import {
|
||||||
|
ACCOUNT_AUTO_INVOICE_NOTE_PREFIX,
|
||||||
|
INITIAL_BALANCE_NOTE,
|
||||||
|
} from "@/lib/accounts/constants";
|
||||||
|
import { getPreviousPeriod } from "@/lib/utils/period";
|
||||||
|
import { safeToNumber } from "@/lib/utils/number";
|
||||||
|
import {
|
||||||
|
and,
|
||||||
|
eq,
|
||||||
|
sum,
|
||||||
|
gte,
|
||||||
|
lte,
|
||||||
|
count,
|
||||||
|
desc,
|
||||||
|
sql,
|
||||||
|
or,
|
||||||
|
isNull,
|
||||||
|
not,
|
||||||
|
ilike,
|
||||||
|
ne,
|
||||||
|
} from "drizzle-orm";
|
||||||
|
|
||||||
|
const DESPESA = "Despesa";
|
||||||
|
const TRANSFERENCIA = "Transferência";
|
||||||
|
|
||||||
|
export type EstablishmentData = {
|
||||||
|
name: string;
|
||||||
|
count: number;
|
||||||
|
totalAmount: number;
|
||||||
|
avgAmount: number;
|
||||||
|
categories: { name: string; count: number }[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TopCategoryData = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
icon: string | null;
|
||||||
|
totalAmount: number;
|
||||||
|
transactionCount: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TopEstabelecimentosData = {
|
||||||
|
establishments: EstablishmentData[];
|
||||||
|
topCategories: TopCategoryData[];
|
||||||
|
summary: {
|
||||||
|
totalEstablishments: number;
|
||||||
|
totalTransactions: number;
|
||||||
|
totalSpent: number;
|
||||||
|
avgPerTransaction: number;
|
||||||
|
mostFrequent: string | null;
|
||||||
|
highestSpending: string | null;
|
||||||
|
};
|
||||||
|
periodLabel: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type PeriodFilter = "3" | "6" | "12";
|
||||||
|
|
||||||
|
function buildPeriodRange(currentPeriod: string, months: number): string[] {
|
||||||
|
const periods: string[] = [];
|
||||||
|
let p = currentPeriod;
|
||||||
|
for (let i = 0; i < months; i++) {
|
||||||
|
periods.unshift(p);
|
||||||
|
p = getPreviousPeriod(p);
|
||||||
|
}
|
||||||
|
return periods;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchTopEstabelecimentosData(
|
||||||
|
userId: string,
|
||||||
|
currentPeriod: string,
|
||||||
|
periodFilter: PeriodFilter = "6",
|
||||||
|
): Promise<TopEstabelecimentosData> {
|
||||||
|
const months = parseInt(periodFilter, 10);
|
||||||
|
const periods = buildPeriodRange(currentPeriod, months);
|
||||||
|
const startPeriod = periods[0];
|
||||||
|
|
||||||
|
// Fetch establishments with transaction count and total amount
|
||||||
|
const establishmentsData = await db
|
||||||
|
.select({
|
||||||
|
name: lancamentos.name,
|
||||||
|
count: count().as("count"),
|
||||||
|
totalAmount: sum(lancamentos.amount).as("total"),
|
||||||
|
})
|
||||||
|
.from(lancamentos)
|
||||||
|
.innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
|
||||||
|
.leftJoin(contas, eq(lancamentos.contaId, contas.id))
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(lancamentos.userId, userId),
|
||||||
|
gte(lancamentos.period, startPeriod),
|
||||||
|
lte(lancamentos.period, currentPeriod),
|
||||||
|
eq(pagadores.role, PAGADOR_ROLE_ADMIN),
|
||||||
|
eq(lancamentos.transactionType, DESPESA),
|
||||||
|
ne(lancamentos.transactionType, TRANSFERENCIA),
|
||||||
|
or(
|
||||||
|
isNull(lancamentos.note),
|
||||||
|
not(ilike(lancamentos.note, `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`)),
|
||||||
|
),
|
||||||
|
or(
|
||||||
|
ne(lancamentos.note, INITIAL_BALANCE_NOTE),
|
||||||
|
isNull(contas.excludeInitialBalanceFromIncome),
|
||||||
|
eq(contas.excludeInitialBalanceFromIncome, false),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.groupBy(lancamentos.name)
|
||||||
|
.orderBy(desc(sql`count`))
|
||||||
|
.limit(50);
|
||||||
|
|
||||||
|
// Fetch categories for each establishment
|
||||||
|
const establishmentNames = establishmentsData.map(
|
||||||
|
(e: (typeof establishmentsData)[0]) => e.name,
|
||||||
|
);
|
||||||
|
|
||||||
|
const categoriesByEstablishment = await db
|
||||||
|
.select({
|
||||||
|
establishmentName: lancamentos.name,
|
||||||
|
categoriaId: lancamentos.categoriaId,
|
||||||
|
count: count().as("count"),
|
||||||
|
})
|
||||||
|
.from(lancamentos)
|
||||||
|
.innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(lancamentos.userId, userId),
|
||||||
|
gte(lancamentos.period, startPeriod),
|
||||||
|
lte(lancamentos.period, currentPeriod),
|
||||||
|
eq(pagadores.role, PAGADOR_ROLE_ADMIN),
|
||||||
|
eq(lancamentos.transactionType, DESPESA),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.groupBy(lancamentos.name, lancamentos.categoriaId);
|
||||||
|
|
||||||
|
// Fetch all category names
|
||||||
|
const allCategories = await db
|
||||||
|
.select({
|
||||||
|
id: categorias.id,
|
||||||
|
name: categorias.name,
|
||||||
|
icon: categorias.icon,
|
||||||
|
})
|
||||||
|
.from(categorias)
|
||||||
|
.where(eq(categorias.userId, userId));
|
||||||
|
|
||||||
|
type CategoryInfo = { id: string; name: string; icon: string | null };
|
||||||
|
const categoryMap = new Map<string, CategoryInfo>(
|
||||||
|
allCategories.map((c): [string, CategoryInfo] => [c.id, c as CategoryInfo]),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Build establishment data with categories
|
||||||
|
type EstablishmentRow = (typeof establishmentsData)[0];
|
||||||
|
type CategoryByEstRow = (typeof categoriesByEstablishment)[0];
|
||||||
|
|
||||||
|
const establishments: EstablishmentData[] = establishmentsData.map(
|
||||||
|
(est: EstablishmentRow) => {
|
||||||
|
const cnt = Number(est.count) || 0;
|
||||||
|
const total = Math.abs(safeToNumber(est.totalAmount));
|
||||||
|
|
||||||
|
const estCategories = categoriesByEstablishment
|
||||||
|
.filter(
|
||||||
|
(c: CategoryByEstRow) =>
|
||||||
|
c.establishmentName === est.name && c.categoriaId,
|
||||||
|
)
|
||||||
|
.map((c: CategoryByEstRow) => ({
|
||||||
|
name: categoryMap.get(c.categoriaId!)?.name || "Sem categoria",
|
||||||
|
count: Number(c.count) || 0,
|
||||||
|
}))
|
||||||
|
.sort(
|
||||||
|
(
|
||||||
|
a: { name: string; count: number },
|
||||||
|
b: { name: string; count: number },
|
||||||
|
) => b.count - a.count,
|
||||||
|
)
|
||||||
|
.slice(0, 3);
|
||||||
|
|
||||||
|
return {
|
||||||
|
name: est.name,
|
||||||
|
count: cnt,
|
||||||
|
totalAmount: total,
|
||||||
|
avgAmount: cnt > 0 ? total / cnt : 0,
|
||||||
|
categories: estCategories,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// Fetch top categories by spending
|
||||||
|
const topCategoriesData = await db
|
||||||
|
.select({
|
||||||
|
categoriaId: lancamentos.categoriaId,
|
||||||
|
totalAmount: sum(lancamentos.amount).as("total"),
|
||||||
|
count: count().as("count"),
|
||||||
|
})
|
||||||
|
.from(lancamentos)
|
||||||
|
.innerJoin(pagadores, eq(lancamentos.pagadorId, pagadores.id))
|
||||||
|
.leftJoin(contas, eq(lancamentos.contaId, contas.id))
|
||||||
|
.where(
|
||||||
|
and(
|
||||||
|
eq(lancamentos.userId, userId),
|
||||||
|
gte(lancamentos.period, startPeriod),
|
||||||
|
lte(lancamentos.period, currentPeriod),
|
||||||
|
eq(pagadores.role, PAGADOR_ROLE_ADMIN),
|
||||||
|
eq(lancamentos.transactionType, DESPESA),
|
||||||
|
or(
|
||||||
|
isNull(lancamentos.note),
|
||||||
|
not(ilike(lancamentos.note, `${ACCOUNT_AUTO_INVOICE_NOTE_PREFIX}%`)),
|
||||||
|
),
|
||||||
|
or(
|
||||||
|
ne(lancamentos.note, INITIAL_BALANCE_NOTE),
|
||||||
|
isNull(contas.excludeInitialBalanceFromIncome),
|
||||||
|
eq(contas.excludeInitialBalanceFromIncome, false),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.groupBy(lancamentos.categoriaId)
|
||||||
|
.orderBy(sql`total ASC`)
|
||||||
|
.limit(10);
|
||||||
|
|
||||||
|
type TopCategoryRow = (typeof topCategoriesData)[0];
|
||||||
|
|
||||||
|
const topCategories: TopCategoryData[] = topCategoriesData
|
||||||
|
.filter((c: TopCategoryRow) => c.categoriaId)
|
||||||
|
.map((cat: TopCategoryRow) => {
|
||||||
|
const catInfo = categoryMap.get(cat.categoriaId!);
|
||||||
|
return {
|
||||||
|
id: cat.categoriaId!,
|
||||||
|
name: catInfo?.name || "Sem categoria",
|
||||||
|
icon: catInfo?.icon || null,
|
||||||
|
totalAmount: Math.abs(safeToNumber(cat.totalAmount)),
|
||||||
|
transactionCount: Number(cat.count) || 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate summary
|
||||||
|
const totalTransactions = establishments.reduce((acc, e) => acc + e.count, 0);
|
||||||
|
const totalSpent = establishments.reduce((acc, e) => acc + e.totalAmount, 0);
|
||||||
|
|
||||||
|
const mostFrequent =
|
||||||
|
establishments.length > 0 ? establishments[0].name : null;
|
||||||
|
|
||||||
|
const sortedBySpending = [...establishments].sort(
|
||||||
|
(a, b) => b.totalAmount - a.totalAmount,
|
||||||
|
);
|
||||||
|
const highestSpending =
|
||||||
|
sortedBySpending.length > 0 ? sortedBySpending[0].name : null;
|
||||||
|
|
||||||
|
const periodLabel =
|
||||||
|
months === 3
|
||||||
|
? "Últimos 3 meses"
|
||||||
|
: months === 6
|
||||||
|
? "Últimos 6 meses"
|
||||||
|
: "Últimos 12 meses";
|
||||||
|
|
||||||
|
return {
|
||||||
|
establishments,
|
||||||
|
topCategories,
|
||||||
|
summary: {
|
||||||
|
totalEstablishments: establishments.length,
|
||||||
|
totalTransactions,
|
||||||
|
totalSpent,
|
||||||
|
avgPerTransaction:
|
||||||
|
totalTransactions > 0 ? totalSpent / totalTransactions : 0,
|
||||||
|
mostFrequent,
|
||||||
|
highestSpending,
|
||||||
|
},
|
||||||
|
periodLabel,
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user