feat(relatorios): reorganizar páginas e criar componente CategoryIconBadge

- Renomear /relatorios/categorias para /relatorios/tendencias - Renomear /relatorios/cartoes para /relatorios/uso-cartoes - Criar componente CategoryIconBadge unificado com cores dinâmicas - Atualizar cards de categorias com novo layout (ações no footer) - Atualizar cards de orçamentos com CategoryIconBadge - Adicionar tooltip detalhado nas células de tendências (valor anterior e diferença) - Adicionar dot colorido (verde/vermelho) para indicar tipo de categoria Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 14:52:11 +00:00
parent 11f85e4b28
commit fd84a0d1ac
25 changed files with 611 additions and 404 deletions
--- a/components/relatorios/category-table.tsx
+++ b/components/relatorios/category-table.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo } from "react";
+import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { CategoryReportItem } from "@/lib/relatorios/types";
+import { formatCurrency, formatPeriodLabel } from "@/lib/relatorios/utils";
+import { formatPeriodForUrl } from "@/lib/utils/period";
+import DotIcon from "../dot-icon";
+import { Card } from "../ui/card";
+import { CategoryCell } from "./category-cell";
+
+export interface CategoryTableProps {
+	title: string;
+	categories: CategoryReportItem[];
+	periods: string[];
+	colorIndexOffset: number;
+}
+
+export function CategoryTable({
+	title,
+	categories,
+	periods,
+	colorIndexOffset,
+}: CategoryTableProps) {
+	// Calculate section totals
+	const sectionTotals = useMemo(() => {
+		const totalsMap = new Map<string, number>();
+		let grandTotal = 0;
+
+		for (const category of categories) {
+			grandTotal += category.total;
+			for (const period of periods) {
+				const monthData = category.monthlyData.get(period);
+				const current = totalsMap.get(period) ?? 0;
+				totalsMap.set(period, current + (monthData?.amount ?? 0));
+			}
+		}
+
+		return { totalsMap, grandTotal };
+	}, [categories, periods]);
+
+	if (categories.length === 0) {
+		return null;
+	}
+
+	return (
+		<Card className="px-6 py-4">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead className="w-[280px] min-w-[280px] font-bold">
+							Categoria
+						</TableHead>
+						{periods.map((period) => (
+							<TableHead
+								key={period}
+								className="text-right min-w-[120px] font-bold"
+							>
+								{formatPeriodLabel(period)}
+							</TableHead>
+						))}
+						<TableHead className="text-right min-w-[120px] font-bold">
+							Total
+						</TableHead>
+					</TableRow>
+				</TableHeader>
+
+				<TableBody>
+					{categories.map((category, index) => {
+						const colorIndex = colorIndexOffset + index;
+						const periodParam = formatPeriodForUrl(periods[periods.length - 1]);
+
+						return (
+							<TableRow key={category.categoryId}>
+								<TableCell>
+									<div className="flex items-center gap-2">
+										<DotIcon
+											color={
+												category.type === "receita"
+													? "bg-green-600"
+													: "bg-red-600"
+											}
+										/>
+
+										<CategoryIconBadge
+											icon={category.icon}
+											name={category.name}
+											colorIndex={colorIndex}
+										/>
+										<Link
+											href={`/categorias/${category.categoryId}?periodo=${periodParam}`}
+											className="flex items-center gap-1.5 truncate hover:underline underline-offset-2"
+										>
+											{category.name}
+										</Link>
+									</div>
+								</TableCell>
+								{periods.map((period, periodIndex) => {
+									const monthData = category.monthlyData.get(period);
+									const isFirstMonth = periodIndex === 0;
+
+									return (
+										<TableCell key={period} className="text-right p-0">
+											<CategoryCell
+												value={monthData?.amount ?? 0}
+												previousValue={monthData?.previousAmount ?? 0}
+												categoryType={category.type}
+												isFirstMonth={isFirstMonth}
+											/>
+										</TableCell>
+									);
+								})}
+								<TableCell className="text-right font-semibold">
+									{formatCurrency(category.total)}
+								</TableCell>
+							</TableRow>
+						);
+					})}
+				</TableBody>
+
+				<TableFooter>
+					<TableRow>
+						<TableCell className="font-bold">Total</TableCell>
+						{periods.map((period) => {
+							const periodTotal = sectionTotals.totalsMap.get(period) ?? 0;
+							return (
+								<TableCell key={period} className="text-right font-semibold">
+									{formatCurrency(periodTotal)}
+								</TableCell>
+							);
+						})}
+						<TableCell className="text-right font-semibold">
+							{formatCurrency(sectionTotals.grandTotal)}
+						</TableCell>
+					</TableRow>
+				</TableFooter>
+			</Table>
+		</Card>
+	);
+}