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

feat(dashboard): adicionar ícones coloridos nos widgets de categorias

Browse Source 
- Criar utilitário centralizado para cores de categorias (lib/utils/category-colors.ts)
- Aplicar ícones coloridos no widget de despesas por categoria
- Aplicar ícones coloridos no widget de receitas por categoria
- Refatorar top-categories para usar utilitário centralizado

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-01-20 13:40:14 +00:00
parent 524865f55e
commit 9fcb707be7
4 changed files with 212 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/dashboard/expenses-by-category-widget-with-chart.tsx
View File

@@ -3,6 +3,11 @@
import MoneyValues from "@/components/money-values";
import { ChartContainer, type ChartConfig } from "@/components/ui/chart";
import type { ExpensesByCategoryData } from "@/lib/dashboard/categories/expenses-by-category";
import {
buildCategoryInitials,
getCategoryBgColor,
getCategoryColor,
} from "@/lib/utils/category-colors";
import { getIconComponent } from "@/lib/utils/icons";
import { formatPeriodForUrl } from "@/lib/utils/period";
import {
@@ -25,20 +30,6 @@ type ExpensesByCategoryWidgetWithChartProps = {
period: string;
};
const buildInitials = (value: string) => {
const parts = value.trim().split(/\s+/).filter(Boolean);
if (parts.length === 0) {
return "CT";
}
if (parts.length === 1) {
const firstPart = parts[0];
return firstPart ? firstPart.slice(0, 2).toUpperCase() : "CT";
}
const firstChar = parts[0]?.[0] ?? "";
const secondChar = parts[1]?.[0] ?? "";
return `${firstChar}${secondChar}`.toUpperCase() || "CT";
};
const formatPercentage = (value: number) => {
return `${Math.abs(value).toFixed(0)}%`;
};
@@ -170,11 +161,13 @@ export function ExpensesByCategoryWidgetWithChart({
<TabsContent value="list" className="mt-0">
<div className="flex flex-col px-0">
{data.categories.map((category) => {
{data.categories.map((category, index) => {
const IconComponent = category.categoryIcon
? getIconComponent(category.categoryIcon)
: null;
const initials = buildInitials(category.categoryName);
const initials = buildCategoryInitials(category.categoryName);
const color = getCategoryColor(index);
const bgColor = getCategoryBgColor(index);
const hasIncrease =
category.percentageChange !== null &&
category.percentageChange > 0;
@@ -199,11 +192,17 @@ export function ExpensesByCategoryWidgetWithChart({
>
<div className="flex items-center justify-between gap-3">
<div className="flex min-w-0 flex-1 items-center gap-2">
<div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
<div
className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
style={{ backgroundColor: bgColor }}
>
{IconComponent ? (
<IconComponent className="size-4 text-foreground" />
<IconComponent className="size-4" style={{ color }} />
) : (
<span className="text-xs font-semibold uppercase text-muted-foreground">
<span
className="text-xs font-semibold uppercase"
style={{ color }}
>
{initials}
</span>
)}