chore: remover páginas estabelecimentos e gastos-por-categoria

- Remove /estabelecimentos e todos seus componentes e actions
- Remove /relatorios/gastos-por-categoria e seus arquivos
- Remove tabela `estabelecimentos` do schema e migration 0019
- Remove nav items de ambas as features do sidebar
- Reverte widget expenses-by-category ao estado original
- Remove filtro de estabelecimento dos lançamentos (filters, table, page-helpers)
- Reverte getRecentEstablishmentsAction para query apenas em lancamentos
- Limpa CHANGELOG removendo entradas das features removidas
This commit is contained in:
Felipe Coutinho
2026-02-21 21:27:37 +00:00
parent 94f6b0a986
commit f640990912
20 changed files with 155 additions and 1023 deletions

View File

@@ -4,20 +4,20 @@ import {
RiArrowDownSFill,
RiArrowUpSFill,
RiExternalLinkLine,
RiListUnordered,
RiPieChart2Line,
RiPieChartLine,
RiWallet3Line,
} from "@remixicon/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useMemo } from "react";
import { Cell, Pie, PieChart, Tooltip } from "recharts";
import { useMemo, useState } from "react";
import { Pie, PieChart, Tooltip } from "recharts";
import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
import { useIsMobile } from "@/hooks/use-mobile";
import MoneyValues from "@/components/money-values";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import type { ExpensesByCategoryData } from "@/lib/dashboard/categories/expenses-by-category";
import { getCategoryColor } from "@/lib/utils/category-colors";
import { formatPeriodForUrl } from "@/lib/utils/period";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
import { WidgetEmptyState } from "../widget-empty-state";
type ExpensesByCategoryWidgetWithChartProps = {
@@ -35,32 +35,31 @@ const formatCurrency = (value: number) =>
currency: "BRL",
}).format(value);
type ChartDataItem = {
category: string;
name: string;
value: number;
percentage: number;
fill: string | undefined;
href: string | undefined;
};
export function ExpensesByCategoryWidgetWithChart({
data,
period,
}: ExpensesByCategoryWidgetWithChartProps) {
const router = useRouter();
const isMobile = useIsMobile();
const [activeTab, setActiveTab] = useState<"list" | "chart">("list");
const periodParam = formatPeriodForUrl(period);
// Configuração do chart com as mesmas cores dos ícones das categorias (getCategoryColor)
// Configuração do chart com cores do CSS
const chartConfig = useMemo(() => {
const config: ChartConfig = {};
const colors = [
"var(--chart-1)",
"var(--chart-2)",
"var(--chart-3)",
"var(--chart-4)",
"var(--chart-5)",
"var(--chart-1)",
"var(--chart-2)",
];
if (data.categories.length <= 7) {
data.categories.forEach((category, index) => {
config[category.categoryId] = {
label: category.categoryName,
color: getCategoryColor(index),
color: colors[index % colors.length],
};
});
} else {
@@ -69,80 +68,62 @@ export function ExpensesByCategoryWidgetWithChart({
top7.forEach((category, index) => {
config[category.categoryId] = {
label: category.categoryName,
color: getCategoryColor(index),
color: colors[index % colors.length],
};
});
config.outros = {
label: "Outros",
color: getCategoryColor(7),
color: "var(--chart-6)",
};
}
return config;
}, [data.categories]);
// Preparar dados para o gráfico de pizza - Top 7 + Outros (com href para navegação)
const chartData = useMemo((): ChartDataItem[] => {
const buildItem = (
categoryId: string,
name: string,
value: number,
percentage: number,
fill: string | undefined,
): ChartDataItem => ({
category: categoryId,
name,
value,
percentage,
fill,
href:
categoryId === "outros"
? undefined
: `/categorias/${categoryId}?periodo=${periodParam}`,
});
// Preparar dados para o gráfico de pizza - Top 7 + Outros
const chartData = useMemo(() => {
if (data.categories.length <= 7) {
return data.categories.map((category) =>
buildItem(
category.categoryId,
category.categoryName,
category.currentAmount,
category.percentageOfTotal,
chartConfig[category.categoryId]?.color,
),
);
return data.categories.map((category) => ({
category: category.categoryId,
name: category.categoryName,
value: category.currentAmount,
percentage: category.percentageOfTotal,
fill: chartConfig[category.categoryId]?.color,
}));
}
// Pegar top 7 categorias
const top7 = data.categories.slice(0, 7);
const others = data.categories.slice(7);
// Somar o restante
const othersTotal = others.reduce((sum, cat) => sum + cat.currentAmount, 0);
const othersPercentage = others.reduce(
(sum, cat) => sum + cat.percentageOfTotal,
0,
);
const top7Data = top7.map((category) =>
buildItem(
category.categoryId,
category.categoryName,
category.currentAmount,
category.percentageOfTotal,
chartConfig[category.categoryId]?.color,
),
);
const top7Data = top7.map((category) => ({
category: category.categoryId,
name: category.categoryName,
value: category.currentAmount,
percentage: category.percentageOfTotal,
fill: chartConfig[category.categoryId]?.color,
}));
// Adicionar "Outros" se houver
if (others.length > 0) {
top7Data.push(
buildItem(
"outros",
"Outros",
othersTotal,
othersPercentage,
chartConfig.outros?.color,
),
);
top7Data.push({
category: "outros",
name: "Outros",
value: othersTotal,
percentage: othersPercentage,
fill: chartConfig.outros?.color,
});
}
return top7Data;
}, [data.categories, chartConfig, periodParam]);
}, [data.categories, chartConfig]);
if (data.categories.length === 0) {
return (
@@ -155,146 +136,25 @@ export function ExpensesByCategoryWidgetWithChart({
}
return (
<div className="flex flex-col gap-8">
{/* Gráfico de pizza (donut) — fatias clicáveis */}
<div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8">
<ChartContainer
config={chartConfig}
className="h-[280px] w-full min-w-0 sm:h-[320px] sm:max-w-[360px]"
>
<PieChart margin={{ top: 8, right: 8, bottom: 8, left: 8 }}>
<Pie
data={chartData}
cx="50%"
cy="50%"
innerRadius="58%"
outerRadius="92%"
paddingAngle={2}
dataKey="value"
nameKey="category"
stroke="transparent"
onClick={(payload: ChartDataItem) => {
if (payload?.href) router.push(payload.href);
}}
label={(props: {
cx?: number;
cy?: number;
midAngle?: number;
innerRadius?: number;
outerRadius?: number;
percent?: number;
}) => {
const { cx = 0, cy = 0, midAngle = 0, innerRadius = 0, outerRadius = 0, percent = 0 } = props;
const percentage = percent * 100;
if (percentage < 6) return null;
const radius = (Number(innerRadius) + Number(outerRadius)) / 2;
const x = cx + radius * Math.cos(-midAngle * (Math.PI / 180));
const y = cy + radius * Math.sin(-midAngle * (Math.PI / 180));
return (
<text
x={x}
y={y}
textAnchor="middle"
dominantBaseline="middle"
className="fill-foreground text-[10px] font-medium"
>
{formatPercentage(percentage)}
</text>
);
}}
labelLine={false}
>
{chartData.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.fill}
className={
entry.href
? "cursor-pointer transition-opacity hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
: ""
}
style={
entry.href
? { filter: "drop-shadow(0 1px 2px rgb(0 0 0 / 0.08))" }
: undefined
}
/>
))}
</Pie>
{!isMobile && (
<Tooltip
content={({ active, payload }) => {
if (active && payload?.length) {
const d = payload[0].payload as ChartDataItem;
return (
<div className="rounded-xl border border-border/80 bg-card px-3 py-2.5 shadow-lg">
<div className="flex flex-col gap-1">
<span className="text-xs font-medium text-foreground">
{d.name}
</span>
<span className="text-sm font-semibold tabular-nums">
{formatCurrency(d.value)}
</span>
<span className="text-[10px] text-muted-foreground">
{formatPercentage(d.percentage)} do total
</span>
{d.href && (
<span className="mt-1 text-[10px] text-primary">
Clique para ver detalhes
</span>
)}
</div>
</div>
);
}
return null;
}}
cursor={false}
/>
)}
</PieChart>
</ChartContainer>
{/* Legenda clicável */}
<div className="flex flex-wrap gap-x-4 gap-y-2 sm:flex-1 sm:flex-col sm:gap-1.5">
{chartData.map((entry, index) => {
const content = (
<>
<span
className="size-3 shrink-0 rounded-full ring-1 ring-border/50"
style={{ backgroundColor: entry.fill }}
aria-hidden
/>
<span className="truncate text-sm text-muted-foreground">
{entry.name}
</span>
<span className="shrink-0 text-xs tabular-nums text-muted-foreground/80">
{formatPercentage(entry.percentage)}
</span>
</>
);
return entry.href ? (
<Link
key={`legend-${index}`}
href={entry.href}
className="flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
{content}
</Link>
) : (
<div
key={`legend-${index}`}
className="flex items-center gap-2 rounded-lg px-2 py-1.5"
>
{content}
</div>
);
})}
</div>
<Tabs
value={activeTab}
onValueChange={(v) => setActiveTab(v as "list" | "chart")}
className="w-full"
>
<div className="flex items-center justify-between">
<TabsList className="grid grid-cols-2">
<TabsTrigger value="list" className="text-xs">
<RiListUnordered className="size-3.5 mr-1" />
Lista
</TabsTrigger>
<TabsTrigger value="chart" className="text-xs">
<RiPieChart2Line className="size-3.5 mr-1" />
Gráfico
</TabsTrigger>
</TabsList>
</div>
{/* Lista de categorias */}
<div className="border-t border-dashed pt-6">
<TabsContent value="list" className="mt-0">
<div className="flex flex-col px-0">
{data.categories.map((category, index) => {
const hasIncrease =
@@ -404,7 +264,65 @@ export function ExpensesByCategoryWidgetWithChart({
);
})}
</div>
</div>
</div>
</TabsContent>
<TabsContent value="chart" className="mt-0">
<div className="flex items-center gap-4">
<ChartContainer config={chartConfig} className="h-[280px] flex-1">
<PieChart>
<Pie
data={chartData}
cx="50%"
cy="50%"
labelLine={false}
label={(entry) => formatPercentage(entry.percentage)}
outerRadius={75}
dataKey="value"
nameKey="category"
/>
<Tooltip
content={({ active, payload }) => {
if (active && payload && payload.length) {
const data = payload[0].payload;
return (
<div className="rounded-lg border bg-background p-2 shadow-sm">
<div className="grid gap-2">
<div className="flex flex-col">
<span className="text-[0.70rem] uppercase text-muted-foreground">
{data.name}
</span>
<span className="font-bold text-foreground">
{formatCurrency(data.value)}
</span>
<span className="text-xs text-muted-foreground">
{formatPercentage(data.percentage)} do total
</span>
</div>
</div>
</div>
);
}
return null;
}}
/>
</PieChart>
</ChartContainer>
<div className="flex flex-col gap-2 min-w-[140px]">
{chartData.map((entry, index) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div
className="size-3 rounded-sm shrink-0"
style={{ backgroundColor: entry.fill }}
/>
<span className="text-xs text-muted-foreground truncate">
{entry.name}
</span>
</div>
))}
</div>
</div>
</TabsContent>
</Tabs>
);
}

View File

@@ -1,97 +0,0 @@
"use client";
import { useState, useTransition } from "react";
import { toast } from "sonner";
import { createEstabelecimentoAction } from "@/app/(dashboard)/estabelecimentos/actions";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RiAddCircleLine } from "@remixicon/react";
interface EstabelecimentoCreateDialogProps {
trigger?: React.ReactNode;
}
export function EstabelecimentoCreateDialog({
trigger,
}: EstabelecimentoCreateDialogProps) {
const [open, setOpen] = useState(false);
const [name, setName] = useState("");
const [isPending, startTransition] = useTransition();
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const trimmed = name.trim();
if (!trimmed) return;
startTransition(async () => {
const result = await createEstabelecimentoAction({ name: trimmed });
if (result.success) {
toast.success(result.message);
setName("");
setOpen(false);
} else {
toast.error(result.error);
}
});
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
{trigger ?? (
<Button>
<RiAddCircleLine className="size-4" />
Novo estabelecimento
</Button>
)}
</DialogTrigger>
<DialogContent>
<form onSubmit={handleSubmit}>
<DialogHeader>
<DialogTitle>Novo estabelecimento</DialogTitle>
<DialogDescription>
Adicione um nome para usar nos lançamentos. Ele aparecerá na lista
e nas sugestões ao criar ou editar lançamentos.
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="estabelecimento-name">Nome</Label>
<Input
id="estabelecimento-name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Ex: Supermercado, Posto, Farmácia"
disabled={isPending}
autoFocus
/>
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => setOpen(false)}
disabled={isPending}
>
Cancelar
</Button>
<Button type="submit" disabled={isPending || !name.trim()}>
{isPending ? "Salvando…" : "Criar"}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

View File

@@ -1,154 +0,0 @@
"use client";
import { RiDeleteBin5Line, RiExternalLinkLine } from "@remixicon/react";
import Link from "next/link";
import { useCallback, useState } from "react";
import { toast } from "sonner";
import { deleteEstabelecimentoAction } from "@/app/(dashboard)/estabelecimentos/actions";
import { ConfirmActionDialog } from "@/components/confirm-action-dialog";
import { Button } from "@/components/ui/button";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { EstabelecimentoLogo } from "@/components/lancamentos/shared/estabelecimento-logo";
import { EstabelecimentoCreateDialog } from "./estabelecimento-create-dialog";
import type { EstabelecimentoRow } from "@/app/(dashboard)/estabelecimentos/data";
interface EstabelecimentosPageProps {
rows: EstabelecimentoRow[];
}
function buildLancamentosUrl(name: string): string {
const params = new URLSearchParams();
params.set("estabelecimento", name);
return `/lancamentos?${params.toString()}`;
}
export function EstabelecimentosPage({ rows }: EstabelecimentosPageProps) {
const [deleteOpen, setDeleteOpen] = useState(false);
const [rowToDelete, setRowToDelete] = useState<EstabelecimentoRow | null>(
null,
);
const handleDeleteRequest = useCallback((row: EstabelecimentoRow) => {
setRowToDelete(row);
setDeleteOpen(true);
}, []);
const handleDeleteOpenChange = useCallback((open: boolean) => {
setDeleteOpen(open);
if (!open) setRowToDelete(null);
}, []);
const handleDeleteConfirm = useCallback(async () => {
if (!rowToDelete?.estabelecimentoId) return;
const result = await deleteEstabelecimentoAction({
id: rowToDelete.estabelecimentoId,
});
if (result.success) {
toast.success(result.message);
setDeleteOpen(false);
setRowToDelete(null);
return;
}
toast.error(result.error);
throw new Error(result.error);
}, [rowToDelete]);
const canDelete = (row: EstabelecimentoRow) =>
row.lancamentosCount === 0 && row.estabelecimentoId != null;
return (
<>
<div className="flex w-full flex-col gap-6">
<div className="flex justify-start">
<EstabelecimentoCreateDialog />
</div>
{rows.length === 0 ? (
<div className="flex min-h-[280px] items-center justify-center rounded-lg border border-dashed bg-muted/10 p-10 text-center text-sm text-muted-foreground">
Nenhum estabelecimento ainda. Crie um ou use a lista que será
preenchida conforme você adiciona lançamentos.
</div>
) : (
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Estabelecimento</TableHead>
<TableHead className="text-right">Lançamentos</TableHead>
<TableHead className="w-[180px] text-right">Ações</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{rows.map((row) => (
<TableRow key={`${row.name}-${row.estabelecimentoId ?? "x"}`}>
<TableCell>
<div className="flex items-center gap-3">
<EstabelecimentoLogo name={row.name} size={32} />
<span className="font-medium">{row.name}</span>
</div>
</TableCell>
<TableCell className="text-right">
{row.lancamentosCount}
</TableCell>
<TableCell className="text-right">
<div className="flex justify-end gap-2">
<Button variant="ghost" size="sm" asChild>
<Link
href={buildLancamentosUrl(row.name)}
className="inline-flex items-center gap-1"
>
<RiExternalLinkLine className="size-4" />
Ver vinculados
</Link>
</Button>
<Button
variant="ghost"
size="sm"
className="text-destructive hover:text-destructive"
disabled={!canDelete(row)}
onClick={() => handleDeleteRequest(row)}
title={
row.lancamentosCount > 0
? "Não é possível excluir: há lançamentos vinculados."
: "Excluir estabelecimento"
}
>
<RiDeleteBin5Line className="size-4" />
Excluir
</Button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
)}
</div>
<ConfirmActionDialog
open={deleteOpen}
onOpenChange={handleDeleteOpenChange}
title="Excluir estabelecimento?"
description={
rowToDelete
? `Tem certeza que deseja excluir "${rowToDelete.name}"? Esta ação não pode ser desfeita.`
: ""
}
confirmLabel="Excluir"
variant="destructive"
onConfirm={handleDeleteConfirm}
/>
</>
);
}

View File

@@ -386,7 +386,6 @@ export function LancamentosPage({
pagadorFilterOptions={pagadorFilterOptions}
categoriaFilterOptions={categoriaFilterOptions}
contaCartaoFilterOptions={contaCartaoFilterOptions}
estabelecimentosOptions={estabelecimentos}
selectedPeriod={selectedPeriod}
onCreate={allowCreate ? handleCreate : undefined}
onMassAdd={allowCreate ? handleMassAdd : undefined}

View File

@@ -122,7 +122,6 @@ interface LancamentosFiltersProps {
pagadorOptions: LancamentoFilterOption[];
categoriaOptions: LancamentoFilterOption[];
contaCartaoOptions: ContaCartaoFilterOption[];
estabelecimentosOptions?: string[];
className?: string;
exportButton?: ReactNode;
hideAdvancedFilters?: boolean;
@@ -132,7 +131,6 @@ export function LancamentosFilters({
pagadorOptions,
categoriaOptions,
contaCartaoOptions,
estabelecimentosOptions = [],
className,
exportButton,
hideAdvancedFilters = false,
@@ -237,16 +235,6 @@ export function LancamentosFilters({
? contaCartaoOptions.find((option) => option.slug === contaCartaoValue)
: null;
const estabelecimentoParam = searchParams.get("estabelecimento");
const estabelecimentoOptionsForSelect = [
...(estabelecimentoParam &&
estabelecimentoParam.trim() &&
!estabelecimentosOptions.includes(estabelecimentoParam.trim())
? [estabelecimentoParam.trim()]
: []),
...estabelecimentosOptions,
];
const [categoriaOpen, setCategoriaOpen] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
@@ -256,8 +244,7 @@ export function LancamentosFilters({
searchParams.get("pagamento") ||
searchParams.get("pagador") ||
searchParams.get("categoria") ||
searchParams.get("contaCartao") ||
searchParams.get("estabelecimento");
searchParams.get("contaCartao");
const handleResetFilters = () => {
handleReset();
@@ -531,45 +518,6 @@ export function LancamentosFilters({
</SelectContent>
</Select>
</div>
{estabelecimentoOptionsForSelect.length > 0 ||
estabelecimentoParam?.trim() ? (
<div className="space-y-2">
<label className="text-sm font-medium">Estabelecimento</label>
<Select
value={
getParamValue("estabelecimento") || FILTER_EMPTY_VALUE
}
onValueChange={(value) =>
handleFilterChange(
"estabelecimento",
value === FILTER_EMPTY_VALUE ? null : value,
)
}
disabled={isPending}
>
<SelectTrigger
className="w-full text-sm border-dashed"
disabled={isPending}
>
<span className="truncate">
{getParamValue("estabelecimento") !== FILTER_EMPTY_VALUE &&
searchParams.get("estabelecimento")
? searchParams.get("estabelecimento")
: "Todos"}
</span>
</SelectTrigger>
<SelectContent>
<SelectItem value={FILTER_EMPTY_VALUE}>Todos</SelectItem>
{estabelecimentoOptionsForSelect.map((name) => (
<SelectItem key={name} value={name}>
{name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
) : null}
</div>
<DrawerFooter>

View File

@@ -715,7 +715,6 @@ type LancamentosTableProps = {
pagadorFilterOptions?: LancamentoFilterOption[];
categoriaFilterOptions?: LancamentoFilterOption[];
contaCartaoFilterOptions?: ContaCartaoFilterOption[];
estabelecimentosOptions?: string[];
selectedPeriod?: string;
onCreate?: (type: "Despesa" | "Receita") => void;
onMassAdd?: () => void;
@@ -742,7 +741,6 @@ export function LancamentosTable({
pagadorFilterOptions = [],
categoriaFilterOptions = [],
contaCartaoFilterOptions = [],
estabelecimentosOptions = [],
selectedPeriod,
onCreate,
onMassAdd,
@@ -923,7 +921,6 @@ export function LancamentosTable({
pagadorOptions={pagadorFilterOptions}
categoriaOptions={categoriaFilterOptions}
contaCartaoOptions={contaCartaoFilterOptions}
estabelecimentosOptions={estabelecimentosOptions}
className="w-full lg:flex-1 lg:justify-end"
hideAdvancedFilters={hasOtherUserData}
exportButton={

View File

@@ -7,13 +7,11 @@ import {
RiDashboardLine,
RiFileChartLine,
RiFundsLine,
RiPieChartLine,
RiGroupLine,
RiInboxLine,
RiPriceTag3Line,
RiSettings2Line,
RiSparklingLine,
RiStore2Line,
RiTodoLine,
} from "@remixicon/react";
@@ -126,11 +124,6 @@ export function createSidebarNavData(
url: "/orcamentos",
icon: RiFundsLine,
},
{
title: "Estabelecimentos",
url: "/estabelecimentos",
icon: RiStore2Line,
},
],
},
{
@@ -167,11 +160,6 @@ export function createSidebarNavData(
url: "/relatorios/tendencias",
icon: RiFileChartLine,
},
{
title: "Gastos por categoria",
url: "/relatorios/gastos-por-categoria",
icon: RiPieChartLine,
},
{
title: "Uso de Cartões",
url: "/relatorios/uso-cartoes",