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", "Conta Poupança",
"Carteira Digital", "Carteira Digital",
"Conta Investimento", "Conta Investimento",
"Dinheiro",
"Pré-Pago | VR/VA", "Pré-Pago | VR/VA",
"Outros",
] as const; ] as const;
const DEFAULT_ACCOUNT_STATUS = ["Ativa", "Inativa"] as const; const DEFAULT_ACCOUNT_STATUS = ["Ativa", "Inativa"] as const;

View File

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

View File

@@ -1,6 +1,18 @@
"use client"; "use client";
import StatusDot from "@/shared/components/status-dot"; 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 }) { export function StatusSelectContent({ label }: { label: string }) {
const isActive = label === "Ativa"; const isActive = label === "Ativa";

View File

@@ -36,13 +36,37 @@ export const getConditionIcon = (condition: string): ReactNode => {
return registry[key] ?? null; 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 => { export const getPaymentMethodIcon = (paymentMethod: string): ReactNode => {
const key = normalizeKey(paymentMethod); const key = normalizeKey(paymentMethod);
const registry: Record<string, ReactNode> = { const registry: Record<string, ReactNode> = {
dinheiro: ( dinheiro: <RemixIcons.RiCashLine className={ICON_CLASS} aria-hidden />,
<RemixIcons.RiMoneyDollarCircleLine className={ICON_CLASS} aria-hidden />
),
pix: <RemixIcons.RiPixLine className={ICON_CLASS} aria-hidden />, pix: <RemixIcons.RiPixLine className={ICON_CLASS} aria-hidden />,
boleto: <RemixIcons.RiBarcodeLine className={ICON_CLASS} aria-hidden />, boleto: <RemixIcons.RiBarcodeLine className={ICON_CLASS} aria-hidden />,
credito: ( credito: (