git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-07-10 11:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): refina experiencia dos widgets

Browse Source
This commit is contained in:
Felipe Coutinho
2026-05-31 15:18:43 -03:00
parent 402f0072af
commit 35abe1b0bf
39 changed files with 887 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/features/dashboard/components/widgets/payers-widget.tsx
View File

@@ -1,10 +1,6 @@
"use client";
import {
RiExternalLinkLine,
RiGroupLine,
RiVerifiedBadgeFill,
} from "@remixicon/react";
import { RiGroupLine, RiVerifiedBadgeFill } from "@remixicon/react";
import Link from "next/link";
import { PercentageChangeIndicator } from "@/features/dashboard/components/percentage-change-indicator";
import type { DashboardPagador } from "@/features/dashboard/lib/payers-queries";
@@ -14,6 +10,11 @@ import {
AvatarFallback,
AvatarImage,
} from "@/shared/components/ui/avatar";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/shared/components/ui/tooltip";
import { WidgetEmptyState } from "@/shared/components/widgets/widget-empty-state";
import { getAvatarSrc } from "@/shared/lib/payers/utils";
import { buildInitials } from "@/shared/utils/initials";
@@ -33,7 +34,7 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
/>
) : (
<div className="flex flex-col">
{payers.map((payer) => {
{payers.map((payer, index) => {
const initials = buildInitials(payer.name);
const hasValidPercentageChange =
typeof payer.percentageChange === "number" &&
@@ -45,8 +46,11 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
return (
<div
key={payer.id}
className="flex items-center justify-between transition-all duration-300 py-1.5"
className="flex items-center justify-between gap-2 transition-all duration-300 py-1.5"
>
<span className="w-3 shrink-0 text-left text-xs font-medium text-muted-foreground">
{index + 1}
</span>
<div className="flex min-w-0 flex-1 items-center gap-2 py-1">
<Avatar className="size-9.5 shrink-0">
<AvatarImage
@@ -64,18 +68,24 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
>
<span className="truncate font-medium">{payer.name}</span>
{payer.isAdmin && (
<RiVerifiedBadgeFill
className="size-4 shrink-0 text-blue-500"
aria-hidden
/>
<Tooltip>
<TooltipTrigger asChild>
<span className="inline-flex shrink-0">
<RiVerifiedBadgeFill
className="size-4 text-blue-500"
aria-hidden
/>
<span className="sr-only">Pessoa principal</span>
</span>
</TooltipTrigger>
<TooltipContent side="top">
Pessoa principal
</TooltipContent>
</Tooltip>
)}
<RiExternalLinkLine
className="size-3 shrink-0 text-muted-foreground"
aria-hidden
/>
</Link>
<p className="truncate text-xs text-muted-foreground">
{payer.email ?? "Sem email cadastrado"}
Despesas no período
</p>
</div>
</div>
@@ -85,7 +95,12 @@ export function PayersWidget({ payers }: PayersWidgetProps) {
className="font-medium"
amount={payer.totalExpenses}
/>
<PercentageChangeIndicator value={percentageChange} />
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<PercentageChangeIndicator value={percentageChange} />
{percentageChange !== null ? (
<span>vs. mês ant.</span>
) : null}
</div>
</div>
</div>
);