feat(accounts): adicionar tipos de conta dinheiro e outros com ícones no seletor

Adiciona "Dinheiro" (issue #50) e "Outros" à lista de tipos de conta.
Implementa AccountTypeSelectContent com ícones distintos por tipo via
getAccountTypeIcon em shared/utils/icons.tsx.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-05-04 15:42:27 +00:00
parent 51652da4f8
commit 0cb01a1d4c
5 changed files with 51 additions and 6 deletions

BIN
public/logos/dinheiro.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

@@ -37,7 +37,9 @@ const DEFAULT_ACCOUNT_TYPES = [
"Conta Poupança",
"Carteira Digital",
"Conta Investimento",
"Dinheiro",
"Pré-Pago | VR/VA",
"Outros",
] as const;
const DEFAULT_ACCOUNT_STATUS = ["Ativa", "Inativa"] as const;

View File

@@ -12,7 +12,10 @@ import {
SelectValue,
} from "@/shared/components/ui/select";
import { Textarea } from "@/shared/components/ui/textarea";
import { StatusSelectContent } from "./account-select-items";
import {
AccountTypeSelectContent,
StatusSelectContent,
} from "./account-select-items";
import type { AccountFormValues } from "./types";
@@ -54,12 +57,16 @@ export function AccountFormFields({
onValueChange={(value) => onChange("accountType", value)}
>
<SelectTrigger id="account-type" className="w-full">
<SelectValue placeholder="Selecione o tipo" />
<SelectValue placeholder="Selecione o tipo">
{values.accountType && (
<AccountTypeSelectContent label={values.accountType} />
)}
</SelectValue>
</SelectTrigger>
<SelectContent>
{accountTypes.map((type) => (
<SelectItem key={type} value={type}>
{type}
<AccountTypeSelectContent label={type} />
</SelectItem>
))}
</SelectContent>

View File

@@ -1,6 +1,18 @@
"use client";
import StatusDot from "@/shared/components/status-dot";
import { getAccountTypeIcon } from "@/shared/utils/icons";
export function AccountTypeSelectContent({ label }: { label: string }) {
const icon = getAccountTypeIcon(label);
return (
<span className="flex items-center gap-2">
{icon}
<span>{label}</span>
</span>
);
}
export function StatusSelectContent({ label }: { label: string }) {
const isActive = label === "Ativa";

View File

@@ -36,13 +36,37 @@ export const getConditionIcon = (condition: string): ReactNode => {
return registry[key] ?? null;
};
export const getAccountTypeIcon = (accountType: string): ReactNode => {
const key = normalizeKey(accountType);
const registry: Record<string, ReactNode> = {
contacorrente: <RemixIcons.RiBankLine className={ICON_CLASS} aria-hidden />,
contapoupanca: (
<RemixIcons.RiSafe2Line className={ICON_CLASS} aria-hidden />
),
carteiradigital: (
<RemixIcons.RiWalletLine className={ICON_CLASS} aria-hidden />
),
containvestimento: (
<RemixIcons.RiFundsLine className={ICON_CLASS} aria-hidden />
),
prepagovrva: <RemixIcons.RiCouponLine className={ICON_CLASS} aria-hidden />,
dinheiro: <RemixIcons.RiCashLine className={ICON_CLASS} aria-hidden />,
outros: <RemixIcons.RiMoreFill className={ICON_CLASS} aria-hidden />,
};
return (
registry[key] ?? (
<RemixIcons.RiBankLine className={ICON_CLASS} aria-hidden />
)
);
};
export const getPaymentMethodIcon = (paymentMethod: string): ReactNode => {
const key = normalizeKey(paymentMethod);
const registry: Record<string, ReactNode> = {
dinheiro: (
<RemixIcons.RiMoneyDollarCircleLine className={ICON_CLASS} aria-hidden />
),
dinheiro: <RemixIcons.RiCashLine className={ICON_CLASS} aria-hidden />,
pix: <RemixIcons.RiPixLine className={ICON_CLASS} aria-hidden />,
boleto: <RemixIcons.RiBarcodeLine className={ICON_CLASS} aria-hidden />,
credito: (