Adicionado aba de estabelecimentos e feita ajuste de interface. Detalhes adicionados no CHANGELOG.md

2026-02-20 00:39:50 -03:00
parent ffde55f589
commit 9b78f839bf
23 changed files with 695 additions and 55 deletions
--- a/components/dashboard/expenses-by-category-widget-with-chart.tsx
+++ b/components/dashboard/expenses-by-category-widget-with-chart.tsx
@@ -16,6 +16,7 @@ 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 { WidgetEmptyState } from "../widget-empty-state";

@@ -51,24 +52,15 @@ export function ExpensesByCategoryWidgetWithChart({
 	const isMobile = useIsMobile();
 	const periodParam = formatPeriodForUrl(period);

-	// Configuração do chart com cores do CSS
+	// Configuração do chart com as mesmas cores dos ícones das categorias (getCategoryColor)
 	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: colors[index % colors.length],
+					color: getCategoryColor(index),
 				};
 			});
 		} else {
@@ -77,12 +69,12 @@ export function ExpensesByCategoryWidgetWithChart({
 			top7.forEach((category, index) => {
 				config[category.categoryId] = {
 					label: category.categoryName,
-					color: colors[index % colors.length],
+					color: getCategoryColor(index),
 				};
 			});
 			config.outros = {
 				label: "Outros",
-				color: "var(--chart-6)",
+				color: getCategoryColor(7),
 			};
 		}

--- a/components/estabelecimentos/estabelecimento-create-dialog.tsx
+++ b/components/estabelecimentos/estabelecimento-create-dialog.tsx
@@ -0,0 +1,97 @@
+"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>
+	);
+}
--- a/components/estabelecimentos/estabelecimentos-page.tsx
+++ b/components/estabelecimentos/estabelecimentos-page.tsx
@@ -0,0 +1,154 @@
+"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}
+			/>
+		</>
+	);
+}
--- a/components/lancamentos/page/lancamentos-page.tsx
+++ b/components/lancamentos/page/lancamentos-page.tsx
@@ -386,6 +386,7 @@ export function LancamentosPage({
 				pagadorFilterOptions={pagadorFilterOptions}
 				categoriaFilterOptions={categoriaFilterOptions}
 				contaCartaoFilterOptions={contaCartaoFilterOptions}
+				estabelecimentosOptions={estabelecimentos}
 				selectedPeriod={selectedPeriod}
 				onCreate={allowCreate ? handleCreate : undefined}
 				onMassAdd={allowCreate ? handleMassAdd : undefined}
--- a/components/lancamentos/shared/estabelecimento-input.tsx
+++ b/components/lancamentos/shared/estabelecimento-input.tsx
@@ -33,7 +33,7 @@ export function EstabelecimentoInput({
 	value,
 	onChange,
 	estabelecimentos = [],
-	placeholder = "Ex.: Padaria",
+	placeholder = "Ex.: Padaria, Transferência, Saldo inicial",
 	required = false,
 	maxLength = 20,
 }: EstabelecimentoInputProps) {
--- a/components/lancamentos/table/lancamentos-filters.tsx
+++ b/components/lancamentos/table/lancamentos-filters.tsx
@@ -122,6 +122,7 @@ interface LancamentosFiltersProps {
 	pagadorOptions: LancamentoFilterOption[];
 	categoriaOptions: LancamentoFilterOption[];
 	contaCartaoOptions: ContaCartaoFilterOption[];
+	estabelecimentosOptions?: string[];
 	className?: string;
 	exportButton?: ReactNode;
 	hideAdvancedFilters?: boolean;
@@ -131,6 +132,7 @@ export function LancamentosFilters({
 	pagadorOptions,
 	categoriaOptions,
 	contaCartaoOptions,
+	estabelecimentosOptions = [],
 	className,
 	exportButton,
 	hideAdvancedFilters = false,
@@ -235,6 +237,16 @@ 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);

@@ -244,7 +256,8 @@ export function LancamentosFilters({
 		searchParams.get("pagamento") ||
 		searchParams.get("pagador") ||
 		searchParams.get("categoria") ||
-		searchParams.get("contaCartao");
+		searchParams.get("contaCartao") ||
+		searchParams.get("estabelecimento");

 	const handleResetFilters = () => {
 		handleReset();
@@ -518,6 +531,45 @@ 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>
--- a/components/lancamentos/table/lancamentos-table.tsx
+++ b/components/lancamentos/table/lancamentos-table.tsx
@@ -715,6 +715,7 @@ type LancamentosTableProps = {
 	pagadorFilterOptions?: LancamentoFilterOption[];
 	categoriaFilterOptions?: LancamentoFilterOption[];
 	contaCartaoFilterOptions?: ContaCartaoFilterOption[];
+	estabelecimentosOptions?: string[];
 	selectedPeriod?: string;
 	onCreate?: (type: "Despesa" | "Receita") => void;
 	onMassAdd?: () => void;
@@ -741,6 +742,7 @@ export function LancamentosTable({
 	pagadorFilterOptions = [],
 	categoriaFilterOptions = [],
 	contaCartaoFilterOptions = [],
+	estabelecimentosOptions = [],
 	selectedPeriod,
 	onCreate,
 	onMassAdd,
@@ -921,6 +923,7 @@ export function LancamentosTable({
 							pagadorOptions={pagadorFilterOptions}
 							categoriaOptions={categoriaFilterOptions}
 							contaCartaoOptions={contaCartaoFilterOptions}
+							estabelecimentosOptions={estabelecimentosOptions}
 							className="w-full lg:flex-1 lg:justify-end"
 							hideAdvancedFilters={hasOtherUserData}
 							exportButton={
--- a/components/sidebar/nav-link.tsx
+++ b/components/sidebar/nav-link.tsx
@@ -13,6 +13,7 @@ import {
 	RiPriceTag3Line,
 	RiSettings2Line,
 	RiSparklingLine,
+	RiStore2Line,
 	RiTodoLine,
 } from "@remixicon/react";

@@ -125,6 +126,11 @@ export function createSidebarNavData(
 						url: "/orcamentos",
 						icon: RiFundsLine,
 					},
+					{
+						title: "Estabelecimentos",
+						url: "/estabelecimentos",
+						icon: RiStore2Line,
+					},
 				],
 			},
 			{
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -49,24 +49,36 @@ function ChartContainer({
 }) {
 	const uniqueId = React.useId();
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	const [mounted, setMounted] = React.useState(false);
+
+	React.useEffect(() => {
+		setMounted(true);
+	}, []);

 	return (
 		<ChartContext.Provider value={{ config }}>
 			<div
 				data-slot="chart"
 				data-chart={chartId}
-				style={{ minWidth: 0, minHeight: 0, ...style }}
+				style={style}
 				className={cn(
-					"flex w-full min-h-0 min-w-0 justify-center text-xs aspect-video [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					"flex w-full min-w-0 min-h-[200px] justify-center text-xs aspect-video [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
 					className,
 				)}
 				{...props}
 			>
 				<ChartStyle id={chartId} config={config} />
-				<div className="h-full w-full">
-					<RechartsPrimitive.ResponsiveContainer width="100%" height="100%">
-						{children}
-					</RechartsPrimitive.ResponsiveContainer>
+				<div className="h-full w-full min-h-[200px] min-w-[280px]">
+					{mounted ? (
+						<RechartsPrimitive.ResponsiveContainer
+							width="100%"
+							height="100%"
+							minWidth={280}
+							minHeight={200}
+						>
+							{children}
+						</RechartsPrimitive.ResponsiveContainer>
+					) : null}
 				</div>
 			</div>
 		</ChartContext.Provider>