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,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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user