Gladyson/openmonetis
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(cartoes): atualiza widgets para seguir padrão visual

Browse Source 
- Refatora CardTopExpenses com rank, badges e barras de progresso
- Refatora CardCategoryBreakdown com cores e ícones de categoria
- Adiciona ícone e title_font no CardsOverview
- Usa WidgetEmptyState e MoneyValues nos componentes
This commit is contained in:
Felipe Coutinho
2026-01-20 15:21:15 +00:00
parent 2caf86871a
commit 8b8257e095
3 changed files with 169 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
components/relatorios/cartoes/card-category-breakdown.tsx
View File

@@ -1,109 +1,120 @@
"use client"; "use client";
import MoneyValues from "@/components/money-values";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { WidgetEmptyState } from "@/components/widget-empty-state";
import type { CardDetailData } from "@/lib/relatorios/cartoes-report"; import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
import {
buildCategoryInitials,
getCategoryBgColor,
getCategoryColor,
} from "@/lib/utils/category-colors";
import { getIconComponent } from "@/lib/utils/icons"; import { getIconComponent } from "@/lib/utils/icons";
import { title_font } from "@/public/fonts/font_index";
import { RiPieChartLine } from "@remixicon/react"; import { RiPieChartLine } from "@remixicon/react";
type CardCategoryBreakdownProps = { type CardCategoryBreakdownProps = {
data: CardDetailData["categoryBreakdown"]; data: CardDetailData["categoryBreakdown"];
}; };
const COLORS = [
"#ef4444",
"#3b82f6",
"#10b981",
"#f59e0b",
"#8b5cf6",
"#ec4899",
"#14b8a6",
"#f97316",
"#6366f1",
"#84cc16",
];
export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) { export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
const formatCurrency = (value: number) => {
return new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(value);
};
if (data.length === 0) { if (data.length === 0) {
return ( return (
<Card> <Card className="h-full">
<CardHeader className="pb-2"> <CardHeader className="pb-3">
<CardTitle className="text-base font-medium"> <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiPieChartLine className="size-4 text-primary" />
Gastos por Categoria Gastos por Categoria
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground"> <WidgetEmptyState
<RiPieChartLine className="size-8 mb-2" /> icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
<p className="text-sm">Nenhum gasto neste período</p> title="Nenhuma categoria encontrada"
</div> description="Quando houver despesas categorizadas, elas aparecerão aqui."
/>
</CardContent> </CardContent>
</Card> </Card>
); );
} }
const totalAmount = data.reduce((acc, c) => acc + c.amount, 0);
return ( return (
<Card> <Card className="h-full">
<CardHeader className="pb-2"> <CardHeader className="pb-3">
<CardTitle className="text-base font-medium"> <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiPieChartLine className="size-4 text-primary" />
Gastos por Categoria Gastos por Categoria
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3">
{data.map((category, index) => {
const IconComponent = category.icon
? getIconComponent(category.icon)
: null;
const color = COLORS[index % COLORS.length];
return ( <CardContent className="pt-0">
<div key={category.id} className="space-y-1.5"> <div className="flex flex-col">
<div className="flex items-center justify-between"> {data.map((category, index) => {
<div className="flex items-center gap-2"> const IconComponent = category.icon
{IconComponent ? ( ? getIconComponent(category.icon)
<IconComponent : null;
className="size-4" const color = getCategoryColor(index);
style={{ color }} const bgColor = getCategoryBgColor(index);
/> const initials = buildCategoryInitials(category.name);
) : (
return (
<div
key={category.id}
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">
<div <div
className="size-4 rounded-sm" className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
style={{ backgroundColor: color }} style={{ backgroundColor: bgColor }}
>
{IconComponent ? (
<IconComponent className="size-4" style={{ color }} />
) : (
<span
className="text-xs font-semibold uppercase"
style={{ color }}
>
{initials}
</span>
)}
</div>
{/* Name and percentage */}
<div className="min-w-0 flex-1">
<span className="text-sm font-medium truncate block">
{category.name}
</span>
<span className="text-xs text-muted-foreground">
{category.percent.toFixed(0)}% do total
</span>
</div>
</div>
{/* Value */}
<div className="flex shrink-0 flex-col items-end">
<MoneyValues
className="text-foreground"
amount={category.amount}
/> />
)} </div>
<span className="text-sm font-medium truncate max-w-[150px]">
{category.name}
</span>
</div> </div>
<span className="text-sm text-muted-foreground">
{formatCurrency(category.amount)} {/* Progress bar */}
</span> <div className="ml-12 mt-1.5">
</div> <Progress className="h-1.5" value={category.percent} />
<div className="flex items-center gap-2">
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
<div
className="h-full rounded-full transition-all"
style={{
width: `${category.percent}%`,
backgroundColor: color,
}}
/>
</div> </div>
<span className="text-xs text-muted-foreground w-10 text-right">
{category.percent.toFixed(0)}%
</span>
</div> </div>
</div> );
); })}
})} </div>
</CardContent> </CardContent>
</Card> </Card>
); );

115
components/relatorios/cartoes/card-top-expenses.tsx
View File

@@ -1,7 +1,12 @@
"use client"; "use client";
import MoneyValues from "@/components/money-values";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { WidgetEmptyState } from "@/components/widget-empty-state";
import type { CardDetailData } from "@/lib/relatorios/cartoes-report"; import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
import { title_font } from "@/public/fonts/font_index";
import { RiShoppingBag3Line } from "@remixicon/react"; import { RiShoppingBag3Line } from "@remixicon/react";
type CardTopExpensesProps = { type CardTopExpensesProps = {
@@ -9,71 +14,95 @@ type CardTopExpensesProps = {
}; };
export function CardTopExpenses({ data }: CardTopExpensesProps) { export function CardTopExpenses({ data }: CardTopExpensesProps) {
const formatCurrency = (value: number) => {
return new Intl.NumberFormat("pt-BR", {
style: "currency",
currency: "BRL",
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(value);
};
if (data.length === 0) { if (data.length === 0) {
return ( return (
<Card> <Card className="h-full">
<CardHeader className="pb-2"> <CardHeader className="pb-3">
<CardTitle className="text-base font-medium"> <CardTitle
Maiores Gastos className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiShoppingBag3Line className="size-4 text-primary" />
Top 10 Gastos do Mês
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground"> <WidgetEmptyState
<RiShoppingBag3Line className="size-8 mb-2" /> icon={
<p className="text-sm">Nenhum gasto neste período</p> <RiShoppingBag3Line className="size-6 text-muted-foreground" />
</div> }
title="Nenhum gasto encontrado"
description="Quando houver gastos registrados, eles aparecerão aqui."
/>
</CardContent> </CardContent>
</Card> </Card>
); );
} }
const maxAmount = Math.max(...data.map((e) => e.amount));
return ( return (
<Card> <Card className="h-full">
<CardHeader className="pb-2"> <CardHeader className="pb-3">
<CardTitle className="text-base font-medium"> <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiShoppingBag3Line className="size-4 text-primary" />
Top 10 Gastos do Mês Top 10 Gastos do Mês
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-0">
<div className="space-y-2"> <div className="flex flex-col">
{data.map((expense, index) => ( {data.map((expense, index) => (
<div <div
key={expense.id} key={expense.id}
className="flex items-center justify-between py-2 border-b last:border-b-0" className="flex flex-col py-2 border-b border-dashed last:border-0"
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center justify-between gap-3">
<span className="text-xs text-muted-foreground w-5"> <div className="flex min-w-0 flex-1 items-center gap-2">
{index + 1}. {/* Rank number */}
</span> <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
<div className="min-w-0"> <span className="text-sm font-semibold text-muted-foreground">
<p className="text-sm font-medium truncate max-w-[200px]"> {index + 1}
{expense.name} </span>
</p> </div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
<span>{expense.date}</span> {/* Name and details */}
{expense.category && ( <div className="min-w-0 flex-1">
<> <span className="text-sm font-medium truncate block">
<span>•</span> {expense.name}
<span className="truncate max-w-[100px]"> </span>
<div className="flex items-center gap-1 mt-0.5 flex-wrap">
<span className="text-xs text-muted-foreground">
{expense.date}
</span>
{expense.category && (
<Badge
variant="secondary"
className="text-xs px-1.5 py-0 h-5"
>
{expense.category} {expense.category}
</span> </Badge>
</> )}
)} </div>
</div> </div>
</div> </div>
{/* Value */}
<div className="flex shrink-0 flex-col items-end">
<MoneyValues
className="text-red-600 dark:text-red-500"
amount={expense.amount}
/>
</div>
</div>
{/* Progress bar */}
<div className="ml-12 mt-1.5">
<Progress
className="h-1.5"
value={(expense.amount / maxAmount) * 100}
/>
</div> </div>
<span className="text-sm font-medium text-red-500 shrink-0">
{formatCurrency(expense.amount)}
</span>
</div> </div>
))} ))}
</div> </div>

21
components/relatorios/cartoes/cards-overview.tsx
View File

@@ -3,14 +3,15 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress"; import { Progress } from "@/components/ui/progress";
import type { CartoesReportData } from "@/lib/relatorios/cartoes-report"; import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
import {
RiBankCard2Line,
RiArrowUpLine,
RiArrowDownLine,
} from "@remixicon/react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import Link from "next/link"; import { title_font } from "@/public/fonts/font_index";
import {
RiArrowDownLine,
RiArrowUpLine,
RiBankCard2Line,
} from "@remixicon/react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
type CardsOverviewProps = { type CardsOverviewProps = {
@@ -78,7 +79,8 @@ export function CardsOverview({ data }: CardsOverviewProps) {
return ( return (
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-base font-medium"> <CardTitle className="text-base font-bold flex items-center gap-2">
<RiBankCard2Line className="size-4" />
Resumo dos Cartões Resumo dos Cartões
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
@@ -95,7 +97,10 @@ export function CardsOverview({ data }: CardsOverviewProps) {
return ( return (
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="text-base font-medium"> <CardTitle
className={`${title_font.className} flex items-center gap-1.5 text-base`}
>
<RiBankCard2Line className="size-4 text-primary" />
Resumo dos Cartões Resumo dos Cartões
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>