Gladyson/openmonetis
1
0
Fork 0
forked from git.gladyson/openmonetis
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
Felipe Coutinho
2026-01-30 14:52:11 +00:00
parent 11f85e4b28
commit fd84a0d1ac
25 changed files with 611 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
components/relatorios/category-report-cards.tsx
View File

@@ -1,63 +1,161 @@
"use client";
import { TypeBadge } from "@/components/type-badge";
import Link from "next/link";
import { useMemo } from "react";
import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { CategoryReportData } from "@/lib/relatorios/types";
import type {
CategoryReportData,
CategoryReportItem,
} from "@/lib/relatorios/types";
import { formatCurrency, formatPeriodLabel } from "@/lib/relatorios/utils";
import { getIconComponent } from "@/lib/utils/icons";
import { formatPeriodForUrl } from "@/lib/utils/period";
import { CategoryCell } from "./category-cell";
interface CategoryReportCardsProps {
data: CategoryReportData;
}
export function CategoryReportCards({ data }: CategoryReportCardsProps) {
const { categories, periods } = data;
interface CategoryCardProps {
category: CategoryReportItem;
periods: string[];
colorIndex: number;
}
function CategoryCard({ category, periods, colorIndex }: CategoryCardProps) {
const periodParam = formatPeriodForUrl(periods[periods.length - 1]);
return (
<div className="md:hidden space-y-4">
{categories.map((category) => {
const Icon = category.icon ? getIconComponent(category.icon) : null;
<Card>
<CardHeader className="pb-3">
<CardTitle className="flex items-center gap-3">
<CategoryIconBadge
icon={category.icon}
name={category.name}
colorIndex={colorIndex}
/>
<Link
href={`/categorias/${category.categoryId}?periodo=${periodParam}`}
className="flex-1 truncate hover:underline underline-offset-2"
>
{category.name}
</Link>
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{periods.map((period, periodIndex) => {
const monthData = category.monthlyData.get(period);
const isFirstMonth = periodIndex === 0;
return (
<Card key={category.categoryId}>
<CardHeader>
<CardTitle className="flex items-center gap-2">
{Icon && <Icon className="h-5 w-5 shrink-0" />}
<span className="flex-1 truncate">{category.name}</span>
<TypeBadge type={category.type} />
</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
{periods.map((period, periodIndex) => {
const monthData = category.monthlyData.get(period);
const isFirstMonth = periodIndex === 0;
return (
<div
key={period}
className="flex items-center justify-between py-2 border-b last:border-b-0"
>
<span className="text-sm text-muted-foreground">
{formatPeriodLabel(period)}
</span>
<CategoryCell
value={monthData?.amount ?? 0}
previousValue={monthData?.previousAmount ?? 0}
categoryType={category.type}
isFirstMonth={isFirstMonth}
/>
</div>
);
})}
<div className="flex items-center justify-between pt-2 font-semibold">
<span>Total</span>
<span>{formatCurrency(category.total)}</span>
</div>
</CardContent>
</Card>
);
}
return (
<div
key={period}
className="flex items-center justify-between py-2 border-b last:border-b-0"
>
<span className="text-sm text-muted-foreground">
{formatPeriodLabel(period)}
</span>
<CategoryCell
value={monthData?.amount ?? 0}
previousValue={monthData?.previousAmount ?? 0}
categoryType={category.type}
isFirstMonth={isFirstMonth}
/>
</div>
);
})}
<div className="flex items-center justify-between pt-2 font-semibold">
<span>Total</span>
<span>{formatCurrency(category.total)}</span>
</div>
</CardContent>
</Card>
);
})}
interface SectionProps {
title: string;
categories: CategoryReportItem[];
periods: string[];
colorIndexOffset: number;
total: number;
}
function Section({
title,
categories,
periods,
colorIndexOffset,
total,
}: SectionProps) {
if (categories.length === 0) {
return null;
}
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
{title}
</span>
<span className="text-sm text-muted-foreground">
{formatCurrency(total)}
</span>
</div>
{categories.map((category, index) => (
<CategoryCard
key={category.categoryId}
category={category}
periods={periods}
colorIndex={colorIndexOffset + index}
/>
))}
</div>
);
}
export function CategoryReportCards({ data }: CategoryReportCardsProps) {
const { categories, periods } = data;
// Separate categories by type and calculate totals
const { receitas, despesas, receitasTotal, despesasTotal } = useMemo(() => {
const receitas: CategoryReportItem[] = [];
const despesas: CategoryReportItem[] = [];
let receitasTotal = 0;
let despesasTotal = 0;
for (const category of categories) {
if (category.type === "receita") {
receitas.push(category);
receitasTotal += category.total;
} else {
despesas.push(category);
despesasTotal += category.total;
}
}
return { receitas, despesas, receitasTotal, despesasTotal };
}, [categories]);
return (
<div className="md:hidden space-y-6">
{/* Despesas Section */}
<Section
title="Despesas"
categories={despesas}
periods={periods}
colorIndexOffset={0}
total={despesasTotal}
/>
{/* Receitas Section */}
<Section
title="Receitas"
categories={receitas}
periods={periods}
colorIndexOffset={despesas.length}
total={receitasTotal}
/>
</div>
);
}