mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-05-09 11:01:45 +00:00
refactor(core): move app para src e padroniza estrutura
This commit is contained in:
Felipe Coutinho
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { RiPieChartLine } from "@remixicon/react";
|
||||
import { CategoryIconBadge } from "@/features/categories/components/category-icon-badge";
|
||||
import type { CardDetailData } from "@/features/reports/cards-report-queries";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import { Progress } from "@/shared/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
|
||||
|
||||
type CardCategoryBreakdownProps = {
|
||||
data: CardDetailData["categoryBreakdown"];
|
||||
};
|
||||
|
||||
export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiPieChartLine className="size-4 text-primary" />
|
||||
Gastos por Categoria
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<WidgetEmptyState
|
||||
icon={<RiPieChartLine className="size-6 text-muted-foreground" />}
|
||||
title="Nenhuma categoria encontrada"
|
||||
description="Quando houver despesas categorizadas, elas aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const _totalAmount = data.reduce((acc, c) => acc + c.amount, 0);
|
||||
|
||||
return (
|
||||
<Card className="h-full overflow-hidden">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiPieChartLine className="size-4 text-primary" />
|
||||
Gastos por Categoria
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="overflow-x-hidden pt-0">
|
||||
<div className="flex flex-col">
|
||||
{data.map((category, index) => (
|
||||
<div
|
||||
key={category.id}
|
||||
className="flex flex-col py-2 border-b border-dashed last:border-0"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<CategoryIconBadge
|
||||
icon={category.icon}
|
||||
name={category.name}
|
||||
colorIndex={index}
|
||||
/>
|
||||
|
||||
{/* Name and percentage */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{category.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{category.percent.toFixed(0)}% do total
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
amount={category.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="pl-11 mt-1.5">
|
||||
<Progress className="h-1.5" value={category.percent} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { RiCalendarCheckLine } from "@remixicon/react";
|
||||
import type { CardDetailData } from "@/features/reports/cards-report-queries";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/shared/components/ui/tooltip";
|
||||
import { cn } from "@/shared/utils";
|
||||
import { formatCurrency } from "@/shared/utils/currency";
|
||||
import { formatPeriodMonthShort } from "@/shared/utils/period";
|
||||
|
||||
type CardInvoiceStatusProps = {
|
||||
data: CardDetailData["invoiceStatus"];
|
||||
};
|
||||
|
||||
export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
||||
const getStatusColor = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "pago":
|
||||
return "bg-success";
|
||||
case "pendente":
|
||||
return "bg-warning";
|
||||
case "atrasado":
|
||||
return "bg-destructive";
|
||||
default:
|
||||
return "bg-muted";
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "pago":
|
||||
return "Pago";
|
||||
case "pendente":
|
||||
return "Pendente";
|
||||
case "atrasado":
|
||||
return "Atrasado";
|
||||
default:
|
||||
return "—";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiCalendarCheckLine className="size-4 text-primary" />
|
||||
Faturas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<TooltipProvider>
|
||||
<div className="flex items-center gap-1">
|
||||
{data.map((invoice) => (
|
||||
<Tooltip key={invoice.period}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex-1 flex flex-col items-center gap-2 cursor-default">
|
||||
<div
|
||||
className={cn(
|
||||
"w-full h-2.5 rounded",
|
||||
getStatusColor(invoice.status),
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{formatPeriodMonthShort(invoice.period)}
|
||||
</span>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top">
|
||||
<p className="font-medium">
|
||||
{formatCurrency(invoice.amount, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs ">{getStatusLabel(invoice.status)}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
112
src/features/reports/components/cards/card-top-expenses.tsx
Normal file
112
src/features/reports/components/cards/card-top-expenses.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import { RiShoppingBag3Line } from "@remixicon/react";
|
||||
import type { CardDetailData } from "@/features/reports/cards-report-queries";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import { Badge } from "@/shared/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import { Progress } from "@/shared/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/shared/components/widget-empty-state";
|
||||
|
||||
type CardTopExpensesProps = {
|
||||
data: CardDetailData["topExpenses"];
|
||||
};
|
||||
|
||||
export function CardTopExpenses({ data }: CardTopExpensesProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiShoppingBag3Line className="size-4 text-primary" />
|
||||
Top 10 Gastos do Mês
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<WidgetEmptyState
|
||||
icon={
|
||||
<RiShoppingBag3Line className="size-6 text-muted-foreground" />
|
||||
}
|
||||
title="Nenhum gasto encontrado"
|
||||
description="Quando houver gastos registrados, eles aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const maxAmount = Math.max(...data.map((e) => e.amount));
|
||||
|
||||
return (
|
||||
<Card className="h-full overflow-hidden">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiShoppingBag3Line className="size-4 text-primary" />
|
||||
Top 10 Gastos do Mês
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="overflow-x-hidden pt-0">
|
||||
<div className="flex flex-col">
|
||||
{data.map((expense, index) => (
|
||||
<div
|
||||
key={expense.id}
|
||||
className="flex flex-col py-2 border-b border-dashed last:border-0"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{/* Rank number */}
|
||||
<div className="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-muted">
|
||||
<span className="text-sm font-semibold text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Name and details */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{expense.name}
|
||||
</span>
|
||||
<div className="mt-0.5 flex min-w-0 flex-col gap-0.5">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{expense.date}
|
||||
</span>
|
||||
{expense.category && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="h-5 max-w-full px-1.5 py-0 text-xs truncate"
|
||||
>
|
||||
{expense.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
amount={expense.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="pl-12 mt-1.5">
|
||||
<Progress
|
||||
className="h-1.5"
|
||||
value={(expense.amount / maxAmount) * 100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
182
src/features/reports/components/cards/card-usage-chart.tsx
Normal file
182
src/features/reports/components/cards/card-usage-chart.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
"use client";
|
||||
|
||||
import { RiBankCard2Line, RiBarChartBoxLine } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import type { CardDetailData } from "@/features/reports/cards-report-queries";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/shared/components/ui/card";
|
||||
import {
|
||||
type ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
} from "@/shared/components/ui/chart";
|
||||
import { resolveLogoSrc } from "@/shared/lib/logo";
|
||||
import { formatCurrency, formatCurrencyCompact } from "@/shared/utils/currency";
|
||||
import { formatPercentage } from "@/shared/utils/percentage";
|
||||
|
||||
type CardUsageChartProps = {
|
||||
data: CardDetailData["monthlyUsage"];
|
||||
limit: number;
|
||||
card: {
|
||||
name: string;
|
||||
logo: string | null;
|
||||
};
|
||||
};
|
||||
|
||||
const chartConfig = {
|
||||
amount: {
|
||||
label: "Uso",
|
||||
color: "#3b82f6",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
// Always show last 12 months
|
||||
const chartData = data.slice(-12).map((item) => ({
|
||||
month: item.periodLabel,
|
||||
amount: item.amount,
|
||||
}));
|
||||
|
||||
const logoPath = resolveLogoSrc(card.logo);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiBarChartBoxLine className="size-4 text-primary" />
|
||||
Histórico de Uso
|
||||
</CardTitle>
|
||||
|
||||
{/* Card logo and name */}
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={card.name}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
)}
|
||||
<span className="max-w-24 truncate text-sm font-medium text-muted-foreground sm:max-w-none">
|
||||
{card.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-2 sm:px-6">
|
||||
<ChartContainer config={chartConfig} className="h-[280px] w-full">
|
||||
<BarChart
|
||||
data={chartData}
|
||||
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
className="text-xs"
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={8}
|
||||
className="text-xs"
|
||||
tickFormatter={(value) =>
|
||||
Math.abs(Number(value)) >= 1000
|
||||
? formatCurrencyCompact(Number(value), {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})
|
||||
: formatCurrency(Number(value), {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})
|
||||
}
|
||||
/>
|
||||
{limit > 0 && (
|
||||
<ReferenceLine
|
||||
y={limit}
|
||||
stroke="#ef4444"
|
||||
strokeDasharray="3 3"
|
||||
label={{
|
||||
value: "Limite",
|
||||
position: "right",
|
||||
className: "text-xs fill-destructive",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ChartTooltip
|
||||
content={({ active, payload }) => {
|
||||
if (!active || !payload || payload.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = payload[0].payload;
|
||||
const value = data.amount as number;
|
||||
const usagePercent = limit > 0 ? (value / limit) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border bg-background p-3 shadow-lg">
|
||||
<div className="mb-2 text-xs font-medium text-muted-foreground">
|
||||
{data.month}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Uso
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
{formatCurrency(value, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
{limit > 0 && (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
% do Limite
|
||||
</span>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
{formatPercentage(usagePercent, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="amount"
|
||||
fill="var(--primary)"
|
||||
radius={[4, 4, 0, 0]}
|
||||
maxBarSize={50}
|
||||
/>
|
||||
</BarChart>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
159
src/features/reports/components/cards/cards-overview.tsx
Normal file
159
src/features/reports/components/cards/cards-overview.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import type { CartoesReportData } from "@/features/reports/cards-report-queries";
|
||||
import MoneyValues from "@/shared/components/money-values";
|
||||
import { Card, CardContent } from "@/shared/components/ui/card";
|
||||
import { Progress } from "@/shared/components/ui/progress";
|
||||
import { resolveCardBrandAsset } from "@/shared/lib/cards/brand-assets";
|
||||
import { resolveLogoSrc } from "@/shared/lib/logo";
|
||||
import { cn } from "@/shared/utils";
|
||||
import { formatCurrency } from "@/shared/utils/currency";
|
||||
import { formatPercentage } from "@/shared/utils/percentage";
|
||||
|
||||
type CardsOverviewProps = {
|
||||
data: CartoesReportData;
|
||||
};
|
||||
|
||||
export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const periodoParam = searchParams.get("periodo");
|
||||
|
||||
const getUsageColor = (percent: number) => {
|
||||
if (percent < 50) return "bg-success";
|
||||
if (percent < 80) return "bg-warning";
|
||||
return "bg-destructive";
|
||||
};
|
||||
|
||||
const buildUrl = (cardId: string) => {
|
||||
const params = new URLSearchParams();
|
||||
if (periodoParam) params.set("periodo", periodoParam);
|
||||
params.set("cartao", cardId);
|
||||
return `/reports/card-usage?${params.toString()}`;
|
||||
};
|
||||
|
||||
const summaryCards = [
|
||||
{ title: "Limite", value: data.totalLimit, isMoney: true },
|
||||
{ title: "Usado", value: data.totalUsage, isMoney: true },
|
||||
{
|
||||
title: "Disponível",
|
||||
value: data.totalLimit - data.totalUsage,
|
||||
isMoney: true,
|
||||
},
|
||||
{ title: "Utilização", value: data.totalUsagePercent, isMoney: false },
|
||||
];
|
||||
|
||||
if (data.cards.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-10 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-8 mb-2" />
|
||||
<p className="text-sm">Nenhum cartão encontrado</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{/* Summary stats */}
|
||||
<div className="grid gap-3 grid-cols-2 lg:grid-cols-4">
|
||||
{summaryCards.map((card) => (
|
||||
<Card key={card.title}>
|
||||
<CardContent className="px-4">
|
||||
<p className="text-xs text-muted-foreground">{card.title}</p>
|
||||
{card.isMoney ? (
|
||||
<MoneyValues
|
||||
className="text-2xl font-semibold"
|
||||
amount={card.value}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-2xl font-semibold">
|
||||
{formatPercentage(card.value, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-base font-bold ml-2 py-2">Meus cartões</p>
|
||||
|
||||
{/* Cards list */}
|
||||
<div className="grid gap-2 grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
|
||||
{data.cards.map((card) => {
|
||||
const logoPath = resolveLogoSrc(card.logo);
|
||||
const brandAsset = resolveCardBrandAsset(card.brand);
|
||||
const isSelected = data.selectedCard?.card.id === card.id;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={card.id}
|
||||
className={cn("px-1 py-1", isSelected && "ring-1 ring-primary")}
|
||||
>
|
||||
<Link
|
||||
href={buildUrl(card.id)}
|
||||
className={cn("flex items-center gap-3 p-3")}
|
||||
>
|
||||
<div className="flex size-9 shrink-0 items-center justify-center">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={card.name}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-base font-bold truncate">
|
||||
{card.name}
|
||||
</span>
|
||||
{brandAsset && (
|
||||
<Image
|
||||
src={brandAsset}
|
||||
alt={card.brand || ""}
|
||||
width={18}
|
||||
height={12}
|
||||
className="h-2.5 w-auto shrink-0 opacity-70"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground tabular-nums">
|
||||
{formatCurrency(card.currentUsage)} /{" "}
|
||||
{formatCurrency(card.limit)}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Progress
|
||||
value={Math.min(card.usagePercent, 100)}
|
||||
className={cn(
|
||||
"h-2 flex-1",
|
||||
`[&>div]:${getUsageColor(card.usagePercent)}`,
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs font-medium tabular-nums">
|
||||
{formatPercentage(card.usagePercent, {
|
||||
maximumFractionDigits: 0,
|
||||
minimumFractionDigits: 0,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user