forked from git.gladyson/openmonetis
refactor: migrate from ESLint to Biome and extract SQL queries to data.ts
- Replace ESLint with Biome for linting and formatting - Configure Biome with tabs, double quotes, and organized imports - Move all SQL/Drizzle queries from page.tsx files to data.ts files - Create new data.ts files for: ajustes, dashboard, relatorios/categorias - Update existing data.ts files: extrato, fatura (add lancamentos queries) - Remove all drizzle-orm imports from page.tsx files - Update README.md with new tooling info Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
@@ -1,121 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import { RiPieChartLine } from "@remixicon/react";
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import {
|
||||
buildCategoryInitials,
|
||||
getCategoryBgColor,
|
||||
getCategoryColor,
|
||||
buildCategoryInitials,
|
||||
getCategoryBgColor,
|
||||
getCategoryColor,
|
||||
} from "@/lib/utils/category-colors";
|
||||
import { getIconComponent } from "@/lib/utils/icons";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
import { RiPieChartLine } from "@remixicon/react";
|
||||
|
||||
type CardCategoryBreakdownProps = {
|
||||
data: CardDetailData["categoryBreakdown"];
|
||||
data: CardDetailData["categoryBreakdown"];
|
||||
};
|
||||
|
||||
export function CardCategoryBreakdown({ data }: CardCategoryBreakdownProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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>
|
||||
);
|
||||
}
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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);
|
||||
const _totalAmount = data.reduce((acc, c) => acc + c.amount, 0);
|
||||
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiPieChartLine className="size-4 text-primary" />
|
||||
Gastos por Categoria
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiPieChartLine className="size-4 text-primary" />
|
||||
Gastos por Categoria
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex flex-col">
|
||||
{data.map((category, index) => {
|
||||
const IconComponent = category.icon
|
||||
? getIconComponent(category.icon)
|
||||
: null;
|
||||
const color = getCategoryColor(index);
|
||||
const bgColor = getCategoryBgColor(index);
|
||||
const initials = buildCategoryInitials(category.name);
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex flex-col">
|
||||
{data.map((category, index) => {
|
||||
const IconComponent = category.icon
|
||||
? getIconComponent(category.icon)
|
||||
: null;
|
||||
const color = getCategoryColor(index);
|
||||
const bgColor = getCategoryBgColor(index);
|
||||
const initials = buildCategoryInitials(category.name);
|
||||
|
||||
return (
|
||||
<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">
|
||||
<div
|
||||
className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{IconComponent ? (
|
||||
<IconComponent className="size-4" style={{ color }} />
|
||||
) : (
|
||||
<span
|
||||
className="text-xs font-semibold uppercase"
|
||||
style={{ color }}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<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">
|
||||
<div
|
||||
className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg"
|
||||
style={{ backgroundColor: bgColor }}
|
||||
>
|
||||
{IconComponent ? (
|
||||
<IconComponent className="size-4" style={{ color }} />
|
||||
) : (
|
||||
<span
|
||||
className="text-xs font-semibold uppercase"
|
||||
style={{ color }}
|
||||
>
|
||||
{initials}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
{/* 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>
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
amount={category.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress className="h-1.5" value={category.percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Progress bar */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress className="h-1.5" value={category.percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,113 +1,113 @@
|
||||
"use client";
|
||||
|
||||
import { RiBankCard2Fill } from "@remixicon/react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
import { RiBankCard2Fill } from "@remixicon/react";
|
||||
|
||||
type CardInvoiceStatusProps = {
|
||||
data: CardDetailData["invoiceStatus"];
|
||||
data: CardDetailData["invoiceStatus"];
|
||||
};
|
||||
|
||||
const monthLabels = [
|
||||
"Jan",
|
||||
"Fev",
|
||||
"Mar",
|
||||
"Abr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Ago",
|
||||
"Set",
|
||||
"Out",
|
||||
"Nov",
|
||||
"Dez",
|
||||
"Jan",
|
||||
"Fev",
|
||||
"Mar",
|
||||
"Abr",
|
||||
"Mai",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Ago",
|
||||
"Set",
|
||||
"Out",
|
||||
"Nov",
|
||||
"Dez",
|
||||
];
|
||||
|
||||
export function CardInvoiceStatus({ data }: CardInvoiceStatusProps) {
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "pago":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
|
||||
>
|
||||
Pago
|
||||
</Badge>
|
||||
);
|
||||
case "pendente":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
|
||||
>
|
||||
Pendente
|
||||
</Badge>
|
||||
);
|
||||
case "atrasado":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
|
||||
>
|
||||
Atrasado
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Badge variant="outline" className="text-muted-foreground">
|
||||
—
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
const getStatusBadge = (status: string | null) => {
|
||||
switch (status) {
|
||||
case "pago":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-400 dark:border-green-900"
|
||||
>
|
||||
Pago
|
||||
</Badge>
|
||||
);
|
||||
case "pendente":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-400 dark:border-yellow-900"
|
||||
>
|
||||
Pendente
|
||||
</Badge>
|
||||
);
|
||||
case "atrasado":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-400 dark:border-red-900"
|
||||
>
|
||||
Atrasado
|
||||
</Badge>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Badge variant="outline" className="text-muted-foreground">
|
||||
—
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const formatPeriod = (period: string) => {
|
||||
const [year, month] = period.split("-");
|
||||
return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`;
|
||||
};
|
||||
const formatPeriod = (period: string) => {
|
||||
const [year, month] = period.split("-");
|
||||
return `${monthLabels[parseInt(month, 10) - 1]}/${year.slice(2)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Fill className="size-4 text-primary" />
|
||||
Status das Faturas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{[...data].reverse().map((invoice) => (
|
||||
<div
|
||||
key={invoice.period}
|
||||
className="flex items-center justify-between py-2 border-b last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium w-16">
|
||||
{formatPeriod(invoice.period)}
|
||||
</span>
|
||||
{getStatusBadge(invoice.status)}
|
||||
</div>
|
||||
<span className="text-sm font-bold">
|
||||
{formatCurrency(invoice.amount)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Fill className="size-4 text-primary" />
|
||||
Status das Faturas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{[...data].reverse().map((invoice) => (
|
||||
<div
|
||||
key={invoice.period}
|
||||
className="flex items-center justify-between py-2 border-b last:border-b-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium w-16">
|
||||
{formatPeriod(invoice.period)}
|
||||
</span>
|
||||
{getStatusBadge(invoice.status)}
|
||||
</div>
|
||||
<span className="text-sm font-bold">
|
||||
{formatCurrency(invoice.amount)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { RiShoppingBag3Line } from "@remixicon/react";
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
@@ -7,106 +8,105 @@ import { Progress } from "@/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
import { RiShoppingBag3Line } from "@remixicon/react";
|
||||
|
||||
type CardTopExpensesProps = {
|
||||
data: CardDetailData["topExpenses"];
|
||||
data: CardDetailData["topExpenses"];
|
||||
};
|
||||
|
||||
export function CardTopExpenses({ data }: CardTopExpensesProps) {
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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>
|
||||
);
|
||||
}
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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));
|
||||
const maxAmount = Math.max(...data.map((e) => e.amount));
|
||||
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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="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-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
|
||||
<span className="text-sm font-semibold text-muted-foreground">
|
||||
{index + 1}
|
||||
</span>
|
||||
</div>
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle
|
||||
className={`${title_font.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="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-10 shrink-0 items-center justify-center overflow-hidden rounded-lg 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="flex items-center gap-1 mt-0.5 flex-wrap">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{expense.date}
|
||||
</span>
|
||||
{expense.category && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 py-0 h-5"
|
||||
>
|
||||
{expense.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Name and details */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{expense.name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1 mt-0.5 flex-wrap">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{expense.date}
|
||||
</span>
|
||||
{expense.category && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 py-0 h-5"
|
||||
>
|
||||
{expense.category}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-red-600 dark:text-red-500"
|
||||
amount={expense.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-red-600 dark:text-red-500"
|
||||
amount={expense.amount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress
|
||||
className="h-1.5"
|
||||
value={(expense.amount / maxAmount) * 100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Progress bar */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress
|
||||
className="h-1.5"
|
||||
value={(expense.amount / maxAmount) * 100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,222 +1,222 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
type ChartConfig,
|
||||
} from "@/components/ui/chart";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { RiBankCard2Line } from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ReferenceLine,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
||||
import {
|
||||
type ChartConfig,
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
} from "@/components/ui/chart";
|
||||
import type { CardDetailData } from "@/lib/relatorios/cartoes-report";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type CardUsageChartProps = {
|
||||
data: CardDetailData["monthlyUsage"];
|
||||
limit: number;
|
||||
card: {
|
||||
name: string;
|
||||
logo: string | null;
|
||||
};
|
||||
data: CardDetailData["monthlyUsage"];
|
||||
limit: number;
|
||||
card: {
|
||||
name: string;
|
||||
logo: string | null;
|
||||
};
|
||||
};
|
||||
|
||||
const chartConfig = {
|
||||
amount: {
|
||||
label: "Uso",
|
||||
color: "#3b82f6",
|
||||
},
|
||||
amount: {
|
||||
label: "Uso",
|
||||
color: "#3b82f6",
|
||||
},
|
||||
} satisfies ChartConfig;
|
||||
|
||||
type PeriodFilter = "3" | "6" | "12";
|
||||
|
||||
const filterOptions: { value: PeriodFilter; label: string }[] = [
|
||||
{ value: "3", label: "3 meses" },
|
||||
{ value: "6", label: "6 meses" },
|
||||
{ value: "12", label: "12 meses" },
|
||||
{ value: "3", label: "3 meses" },
|
||||
{ value: "6", label: "6 meses" },
|
||||
{ value: "12", label: "12 meses" },
|
||||
];
|
||||
|
||||
const resolveLogoPath = (logo: string | null) => {
|
||||
if (!logo) return null;
|
||||
if (
|
||||
logo.startsWith("http://") ||
|
||||
logo.startsWith("https://") ||
|
||||
logo.startsWith("data:")
|
||||
) {
|
||||
return logo;
|
||||
}
|
||||
return logo.startsWith("/") ? logo : `/logos/${logo}`;
|
||||
if (!logo) return null;
|
||||
if (
|
||||
logo.startsWith("http://") ||
|
||||
logo.startsWith("https://") ||
|
||||
logo.startsWith("data:")
|
||||
) {
|
||||
return logo;
|
||||
}
|
||||
return logo.startsWith("/") ? logo : `/logos/${logo}`;
|
||||
};
|
||||
|
||||
export function CardUsageChart({ data, limit, card }: CardUsageChartProps) {
|
||||
const [period, setPeriod] = useState<PeriodFilter>("6");
|
||||
const [period, setPeriod] = useState<PeriodFilter>("6");
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const formatCurrencyCompact = (value: number) => {
|
||||
if (Math.abs(value) >= 1000) {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
notation: "compact",
|
||||
}).format(value);
|
||||
}
|
||||
return formatCurrency(value);
|
||||
};
|
||||
const formatCurrencyCompact = (value: number) => {
|
||||
if (Math.abs(value) >= 1000) {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
notation: "compact",
|
||||
}).format(value);
|
||||
}
|
||||
return formatCurrency(value);
|
||||
};
|
||||
|
||||
// Filter data based on selected period
|
||||
const filteredData = data.slice(-Number(period));
|
||||
// Filter data based on selected period
|
||||
const filteredData = data.slice(-Number(period));
|
||||
|
||||
const chartData = filteredData.map((item) => ({
|
||||
month: item.periodLabel,
|
||||
amount: item.amount,
|
||||
}));
|
||||
const chartData = filteredData.map((item) => ({
|
||||
month: item.periodLabel,
|
||||
amount: item.amount,
|
||||
}));
|
||||
|
||||
const logoPath = resolveLogoPath(card.logo);
|
||||
const logoPath = resolveLogoPath(card.logo);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Card logo and name on the left */}
|
||||
<div className="flex items-center gap-2">
|
||||
{logoPath ? (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-semibold">{card.name}</span>
|
||||
</div>
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Card logo and name on the left */}
|
||||
<div className="flex items-center gap-2">
|
||||
{logoPath ? (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={32}
|
||||
height={32}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
<RiBankCard2Line className="size-5 text-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-semibold">{card.name}</span>
|
||||
</div>
|
||||
|
||||
{/* Filters on the right */}
|
||||
<div className="flex items-center gap-1">
|
||||
{filterOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
variant={period === option.value ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setPeriod(option.value)}
|
||||
className={cn(
|
||||
"h-7 text-xs",
|
||||
period === option.value && "pointer-events-none",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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={formatCurrencyCompact}
|
||||
/>
|
||||
{limit > 0 && (
|
||||
<ReferenceLine
|
||||
y={limit}
|
||||
stroke="#ef4444"
|
||||
strokeDasharray="3 3"
|
||||
label={{
|
||||
value: "Limite",
|
||||
position: "right",
|
||||
className: "text-xs fill-red-500",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ChartTooltip
|
||||
content={({ active, payload }) => {
|
||||
if (!active || !payload || payload.length === 0) {
|
||||
return null;
|
||||
}
|
||||
{/* Filters on the right */}
|
||||
<div className="flex items-center gap-1">
|
||||
{filterOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
variant={period === option.value ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setPeriod(option.value)}
|
||||
className={cn(
|
||||
"h-7 text-xs",
|
||||
period === option.value && "pointer-events-none",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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={formatCurrencyCompact}
|
||||
/>
|
||||
{limit > 0 && (
|
||||
<ReferenceLine
|
||||
y={limit}
|
||||
stroke="#ef4444"
|
||||
strokeDasharray="3 3"
|
||||
label={{
|
||||
value: "Limite",
|
||||
position: "right",
|
||||
className: "text-xs fill-red-500",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<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;
|
||||
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)}
|
||||
</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">
|
||||
{usagePercent.toFixed(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>
|
||||
);
|
||||
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)}
|
||||
</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">
|
||||
{usagePercent.toFixed(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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,229 +1,229 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiArrowDownLine,
|
||||
RiArrowUpLine,
|
||||
RiBankCard2Line,
|
||||
} from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import type { CartoesReportData } from "@/lib/relatorios/cartoes-report";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { title_font } from "@/public/fonts/font_index";
|
||||
import {
|
||||
RiArrowDownLine,
|
||||
RiArrowUpLine,
|
||||
RiBankCard2Line,
|
||||
} from "@remixicon/react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
type CardsOverviewProps = {
|
||||
data: CartoesReportData;
|
||||
data: CartoesReportData;
|
||||
};
|
||||
|
||||
const BRAND_ASSETS: Record<string, string> = {
|
||||
visa: "/bandeiras/visa.svg",
|
||||
mastercard: "/bandeiras/mastercard.svg",
|
||||
amex: "/bandeiras/amex.svg",
|
||||
american: "/bandeiras/amex.svg",
|
||||
elo: "/bandeiras/elo.svg",
|
||||
hipercard: "/bandeiras/hipercard.svg",
|
||||
hiper: "/bandeiras/hipercard.svg",
|
||||
visa: "/bandeiras/visa.svg",
|
||||
mastercard: "/bandeiras/mastercard.svg",
|
||||
amex: "/bandeiras/amex.svg",
|
||||
american: "/bandeiras/amex.svg",
|
||||
elo: "/bandeiras/elo.svg",
|
||||
hipercard: "/bandeiras/hipercard.svg",
|
||||
hiper: "/bandeiras/hipercard.svg",
|
||||
};
|
||||
|
||||
const resolveBrandAsset = (brand: string | null) => {
|
||||
if (!brand) return null;
|
||||
const normalized = brand.trim().toLowerCase();
|
||||
const match = (
|
||||
Object.keys(BRAND_ASSETS) as Array<keyof typeof BRAND_ASSETS>
|
||||
).find((entry) => normalized.includes(entry));
|
||||
return match ? BRAND_ASSETS[match] : null;
|
||||
if (!brand) return null;
|
||||
const normalized = brand.trim().toLowerCase();
|
||||
const match = (
|
||||
Object.keys(BRAND_ASSETS) as Array<keyof typeof BRAND_ASSETS>
|
||||
).find((entry) => normalized.includes(entry));
|
||||
return match ? BRAND_ASSETS[match] : null;
|
||||
};
|
||||
|
||||
const resolveLogoPath = (logo: string | null) => {
|
||||
if (!logo) return null;
|
||||
if (
|
||||
logo.startsWith("http://") ||
|
||||
logo.startsWith("https://") ||
|
||||
logo.startsWith("data:")
|
||||
) {
|
||||
return logo;
|
||||
}
|
||||
return logo.startsWith("/") ? logo : `/logos/${logo}`;
|
||||
if (!logo) return null;
|
||||
if (
|
||||
logo.startsWith("http://") ||
|
||||
logo.startsWith("https://") ||
|
||||
logo.startsWith("data:")
|
||||
) {
|
||||
return logo;
|
||||
}
|
||||
return logo.startsWith("/") ? logo : `/logos/${logo}`;
|
||||
};
|
||||
|
||||
export function CardsOverview({ data }: CardsOverviewProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const periodoParam = searchParams.get("periodo");
|
||||
const searchParams = useSearchParams();
|
||||
const periodoParam = searchParams.get("periodo");
|
||||
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("pt-BR", {
|
||||
style: "currency",
|
||||
currency: "BRL",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
const getUsageColor = (percent: number) => {
|
||||
if (percent < 50) return "bg-green-500";
|
||||
if (percent < 80) return "bg-yellow-500";
|
||||
return "bg-red-500";
|
||||
};
|
||||
const getUsageColor = (percent: number) => {
|
||||
if (percent < 50) return "bg-green-500";
|
||||
if (percent < 80) return "bg-yellow-500";
|
||||
return "bg-red-500";
|
||||
};
|
||||
|
||||
const buildUrl = (cardId: string) => {
|
||||
const params = new URLSearchParams();
|
||||
if (periodoParam) params.set("periodo", periodoParam);
|
||||
params.set("cartao", cardId);
|
||||
return `/relatorios/cartoes?${params.toString()}`;
|
||||
};
|
||||
const buildUrl = (cardId: string) => {
|
||||
const params = new URLSearchParams();
|
||||
if (periodoParam) params.set("periodo", periodoParam);
|
||||
params.set("cartao", cardId);
|
||||
return `/relatorios/cartoes?${params.toString()}`;
|
||||
};
|
||||
|
||||
if (data.cards.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-bold flex items-center gap-2">
|
||||
<RiBankCard2Line className="size-4" />
|
||||
Resumo dos Cartões
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-8 mb-2" />
|
||||
<p className="text-sm">Nenhum cartão ativo encontrado</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
if (data.cards.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base font-bold flex items-center gap-2">
|
||||
<RiBankCard2Line className="size-4" />
|
||||
Resumo dos Cartões
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
|
||||
<RiBankCard2Line className="size-8 mb-2" />
|
||||
<p className="text-sm">Nenhum cartão ativo encontrado</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Line className="size-4 text-primary" />
|
||||
Resumo dos Cartões
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Limite Total</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{formatCurrency(data.totalLimit)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Uso Total</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{formatCurrency(data.totalUsage)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Utilização</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{data.totalUsagePercent.toFixed(0)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle
|
||||
className={`${title_font.className} flex items-center gap-1.5 text-base`}
|
||||
>
|
||||
<RiBankCard2Line className="size-4 text-primary" />
|
||||
Resumo dos Cartões
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Limite Total</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{formatCurrency(data.totalLimit)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Uso Total</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{formatCurrency(data.totalUsage)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg border bg-muted/30">
|
||||
<p className="text-xs text-muted-foreground">Utilização</p>
|
||||
<p className="text-lg font-semibold">
|
||||
{data.totalUsagePercent.toFixed(0)}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
{data.cards.map((card) => {
|
||||
const logoPath = resolveLogoPath(card.logo);
|
||||
const brandAsset = resolveBrandAsset(card.brand);
|
||||
<div className="flex flex-col">
|
||||
{data.cards.map((card) => {
|
||||
const logoPath = resolveLogoPath(card.logo);
|
||||
const brandAsset = resolveBrandAsset(card.brand);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={card.id}
|
||||
href={buildUrl(card.id)}
|
||||
className={cn(
|
||||
"flex flex-col py-2 border-b border-dashed last:border-0 transition-colors hover:bg-muted/50",
|
||||
data.selectedCard?.card.id === card.id && "bg-muted/30",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{/* Logo container - size-10 like expenses-by-category */}
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={28}
|
||||
height={28}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
) : (
|
||||
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<Link
|
||||
key={card.id}
|
||||
href={buildUrl(card.id)}
|
||||
className={cn(
|
||||
"flex flex-col py-2 border-b border-dashed last:border-0 transition-colors hover:bg-muted/50",
|
||||
data.selectedCard?.card.id === card.id && "bg-muted/30",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{/* Logo container - size-10 like expenses-by-category */}
|
||||
<div className="flex size-10 shrink-0 items-center justify-center">
|
||||
{logoPath ? (
|
||||
<Image
|
||||
src={logoPath}
|
||||
alt={`Logo ${card.name}`}
|
||||
width={28}
|
||||
height={28}
|
||||
className="rounded object-contain"
|
||||
/>
|
||||
) : (
|
||||
<RiBankCard2Line className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name and brand */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{card.name}
|
||||
</span>
|
||||
{brandAsset && (
|
||||
<Image
|
||||
src={brandAsset}
|
||||
alt={`Bandeira ${card.brand}`}
|
||||
width={24}
|
||||
height={16}
|
||||
className="h-2.5 w-auto shrink-0"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{formatCurrency(card.currentUsage)} /{" "}
|
||||
{formatCurrency(card.limit)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Name and brand */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{card.name}
|
||||
</span>
|
||||
{brandAsset && (
|
||||
<Image
|
||||
src={brandAsset}
|
||||
alt={`Bandeira ${card.brand}`}
|
||||
width={24}
|
||||
height={16}
|
||||
className="h-2.5 w-auto shrink-0"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>
|
||||
{formatCurrency(card.currentUsage)} /{" "}
|
||||
{formatCurrency(card.limit)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trend and percentage */}
|
||||
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<span className="text-sm font-medium">
|
||||
{card.usagePercent.toFixed(0)}%
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{card.trend === "up" && (
|
||||
<RiArrowUpLine className="size-3 text-red-500" />
|
||||
)}
|
||||
{card.trend === "down" && (
|
||||
<RiArrowDownLine className="size-3 text-green-500" />
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs",
|
||||
card.trend === "up" && "text-red-500",
|
||||
card.trend === "down" && "text-green-500",
|
||||
card.trend === "stable" && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{card.changePercent > 0 ? "+" : ""}
|
||||
{card.changePercent.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Trend and percentage */}
|
||||
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<span className="text-sm font-medium">
|
||||
{card.usagePercent.toFixed(0)}%
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{card.trend === "up" && (
|
||||
<RiArrowUpLine className="size-3 text-red-500" />
|
||||
)}
|
||||
{card.trend === "down" && (
|
||||
<RiArrowDownLine className="size-3 text-green-500" />
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs",
|
||||
card.trend === "up" && "text-red-500",
|
||||
card.trend === "down" && "text-green-500",
|
||||
card.trend === "stable" && "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{card.changePercent > 0 ? "+" : ""}
|
||||
{card.changePercent.toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar - aligned with content */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress
|
||||
value={Math.min(card.usagePercent, 100)}
|
||||
className={cn(
|
||||
"h-1.5",
|
||||
`[&>div]:${getUsageColor(card.usagePercent)}`,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
{/* Progress bar - aligned with content */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress
|
||||
value={Math.min(card.usagePercent, 100)}
|
||||
className={cn(
|
||||
"h-1.5",
|
||||
`[&>div]:${getUsageColor(card.usagePercent)}`,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user