f50261208a
- Adicionar tokens semânticos de estado (success, warning, info) no globals.css - Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos - Unificar 3 arrays duplicados de cores de categorias em importação única - Corrigir widgets de boleto/fatura que não atualizavam após pagamento (actions de fatura e antecipação não invalidavam cache do dashboard) - Corrigir scroll em listas Popover+Command (modal prop) - Adicionar link "detalhes" no card de orçamento para página da categoria - Adicionar indicadores de tendência coloridos nos cards de métricas - Estender cores de chart de 6 para 10 - Normalizar dark mode e remover tokens não utilizados Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
121 lines
2.8 KiB
TypeScript
121 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { RiBankCard2Line, RiBankLine } from "@remixicon/react";
|
|
import Image from "next/image";
|
|
import { CategoryIcon } from "@/components/categorias/category-icon";
|
|
import DotIcon from "@/components/dot-icon";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { getAvatarSrc } from "@/lib/pagadores/utils";
|
|
import { getConditionIcon, getPaymentMethodIcon } from "@/lib/utils/icons";
|
|
|
|
type SelectItemContentProps = {
|
|
label: string;
|
|
avatarUrl?: string | null;
|
|
logo?: string | null;
|
|
icon?: string | null;
|
|
};
|
|
|
|
export function PagadorSelectContent({
|
|
label,
|
|
avatarUrl,
|
|
}: SelectItemContentProps) {
|
|
const avatarSrc = getAvatarSrc(avatarUrl);
|
|
const initial = label.charAt(0).toUpperCase() || "?";
|
|
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
<Avatar className="size-5 border border-border/60 bg-background">
|
|
<AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
|
|
<AvatarFallback className="text-[10px] font-medium uppercase">
|
|
{initial}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function CategoriaSelectContent({
|
|
label,
|
|
icon,
|
|
}: SelectItemContentProps) {
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
<CategoryIcon name={icon} className="size-4" />
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function TransactionTypeSelectContent({ label }: { label: string }) {
|
|
const colorMap: Record<string, string> = {
|
|
Receita: "bg-success",
|
|
Despesa: "bg-destructive",
|
|
Transferência: "bg-info",
|
|
};
|
|
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
<DotIcon color={colorMap[label]} />
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function PaymentMethodSelectContent({ label }: { label: string }) {
|
|
const icon = getPaymentMethodIcon(label);
|
|
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
{icon}
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function ConditionSelectContent({ label }: { label: string }) {
|
|
const icon = getConditionIcon(label);
|
|
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
{icon}
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export function ContaCartaoSelectContent({
|
|
label,
|
|
logo,
|
|
isCartao,
|
|
}: SelectItemContentProps & { isCartao?: boolean }) {
|
|
const resolveLogoSrc = (logoPath: string | null) => {
|
|
if (!logoPath) {
|
|
return null;
|
|
}
|
|
|
|
const fileName = logoPath.split("/").filter(Boolean).pop() ?? logoPath;
|
|
return `/logos/${fileName}`;
|
|
};
|
|
|
|
const logoSrc = resolveLogoSrc(logo);
|
|
const Icon = isCartao ? RiBankCard2Line : RiBankLine;
|
|
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
{logoSrc ? (
|
|
<Image
|
|
src={logoSrc}
|
|
alt={`Logo de ${label}`}
|
|
width={20}
|
|
height={20}
|
|
className="rounded"
|
|
/>
|
|
) : (
|
|
<Icon className="size-4 text-muted-foreground" aria-hidden />
|
|
)}
|
|
<span>{label}</span>
|
|
</span>
|
|
);
|
|
}
|