refactor: move componentes de estabelecimentos para relatorios
This commit is contained in:
Felipe Coutinho
130
components/relatorios/estabelecimentos/establishments-list.tsx
Normal file
130
components/relatorios/estabelecimentos/establishments-list.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import { RiStore2Line } from "@remixicon/react";
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { WidgetEmptyState } from "@/components/widget-empty-state";
|
||||
import type { TopEstabelecimentosData } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
||||
|
||||
type EstablishmentsListProps = {
|
||||
establishments: TopEstabelecimentosData["establishments"];
|
||||
};
|
||||
|
||||
const buildInitials = (value: string) => {
|
||||
const parts = value.trim().split(/\s+/).filter(Boolean);
|
||||
if (parts.length === 0) return "ES";
|
||||
if (parts.length === 1) {
|
||||
const firstPart = parts[0];
|
||||
return firstPart ? firstPart.slice(0, 2).toUpperCase() : "ES";
|
||||
}
|
||||
const firstChar = parts[0]?.[0] ?? "";
|
||||
const secondChar = parts[1]?.[0] ?? "";
|
||||
return `${firstChar}${secondChar}`.toUpperCase() || "ES";
|
||||
};
|
||||
|
||||
export function EstablishmentsList({
|
||||
establishments,
|
||||
}: EstablishmentsListProps) {
|
||||
if (establishments.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiStore2Line className="size-4 text-primary" />
|
||||
Top Estabelecimentos
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<WidgetEmptyState
|
||||
icon={<RiStore2Line className="size-6 text-muted-foreground" />}
|
||||
title="Nenhum estabelecimento encontrado"
|
||||
description="Quando houver compras registradas, elas aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const maxCount = Math.max(...establishments.map((e) => e.count));
|
||||
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiStore2Line className="size-4 text-primary" />
|
||||
Top Estabelecimentos por Frequência
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex flex-col">
|
||||
{establishments.map((establishment, index) => {
|
||||
const _initials = buildInitials(establishment.name);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={establishment.name}
|
||||
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 - same size as icon containers */}
|
||||
<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 categories */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{establishment.name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1 mt-0.5 flex-wrap">
|
||||
{establishment.categories
|
||||
.slice(0, 2)
|
||||
.map((cat, catIndex) => (
|
||||
<Badge
|
||||
key={catIndex}
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 py-0 h-5"
|
||||
>
|
||||
{cat.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value and stats */}
|
||||
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
amount={establishment.totalAmount}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{establishment.count}x • Média:{" "}
|
||||
<MoneyValues
|
||||
className="text-xs"
|
||||
amount={establishment.avgAmount}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="ml-12 mt-1.5">
|
||||
<Progress
|
||||
className="h-1.5"
|
||||
value={(establishment.count / maxCount) * 100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
51
components/relatorios/estabelecimentos/highlights-cards.tsx
Normal file
51
components/relatorios/estabelecimentos/highlights-cards.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
"use client";
|
||||
|
||||
import { RiFireLine, RiTrophyLine } from "@remixicon/react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import type { TopEstabelecimentosData } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
||||
|
||||
type HighlightsCardsProps = {
|
||||
summary: TopEstabelecimentosData["summary"];
|
||||
};
|
||||
|
||||
export function HighlightsCards({ summary }: HighlightsCardsProps) {
|
||||
return (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<Card className="bg-linear-to-br from-violet-50 to-violet-50/50 dark:from-violet-950/20 dark:to-violet-950/10">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center size-10 rounded-xl bg-violet-100 dark:bg-violet-900/40">
|
||||
<RiTrophyLine className="size-5 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-violet-700/80 dark:text-violet-400/80 font-medium">
|
||||
Mais Frequente
|
||||
</p>
|
||||
<p className="font-bold text-xl text-violet-900 dark:text-violet-100 truncate">
|
||||
{summary.mostFrequent || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-linear-to-br from-red-50 to-rose-50/50 dark:from-red-950/20 dark:to-rose-950/10">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center justify-center size-10 rounded-xl bg-red-100 dark:bg-red-900/40">
|
||||
<RiFireLine className="size-5 text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-red-700/80 dark:text-red-400/80 font-medium">
|
||||
Maior Gasto Total
|
||||
</p>
|
||||
<p className="font-bold text-xl text-red-900 dark:text-red-100 truncate">
|
||||
{summary.highestSpending || "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
48
components/relatorios/estabelecimentos/period-filter.tsx
Normal file
48
components/relatorios/estabelecimentos/period-filter.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { PeriodFilter } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type PeriodFilterProps = {
|
||||
currentFilter: PeriodFilter;
|
||||
};
|
||||
|
||||
const filterOptions: { value: PeriodFilter; label: string }[] = [
|
||||
{ value: "3", label: "3 meses" },
|
||||
{ value: "6", label: "6 meses" },
|
||||
{ value: "12", label: "12 meses" },
|
||||
];
|
||||
|
||||
export function PeriodFilterButtons({ currentFilter }: PeriodFilterProps) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const handleFilterChange = (filter: PeriodFilter) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("meses", filter);
|
||||
router.push(`/relatorios/estabelecimentos?${params.toString()}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1">
|
||||
{filterOptions.map((option) => (
|
||||
<Button
|
||||
key={option.value}
|
||||
variant={currentFilter === option.value ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleFilterChange(option.value)}
|
||||
className={cn(
|
||||
"h-8",
|
||||
currentFilter === option.value && "pointer-events-none",
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
components/relatorios/estabelecimentos/summary-cards.tsx
Normal file
78
components/relatorios/estabelecimentos/summary-cards.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
RiExchangeLine,
|
||||
RiMoneyDollarCircleLine,
|
||||
RiRepeatLine,
|
||||
RiStore2Line,
|
||||
} from "@remixicon/react";
|
||||
import MoneyValues from "@/components/money-values";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import type { TopEstabelecimentosData } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
||||
|
||||
type SummaryCardsProps = {
|
||||
summary: TopEstabelecimentosData["summary"];
|
||||
};
|
||||
|
||||
export function SummaryCards({ summary }: SummaryCardsProps) {
|
||||
const cards = [
|
||||
{
|
||||
title: "Estabelecimentos",
|
||||
value: summary.totalEstablishments,
|
||||
isMoney: false,
|
||||
icon: RiStore2Line,
|
||||
description: "Locais diferentes",
|
||||
},
|
||||
{
|
||||
title: "Transações",
|
||||
value: summary.totalTransactions,
|
||||
isMoney: false,
|
||||
icon: RiExchangeLine,
|
||||
description: "Compras no período",
|
||||
},
|
||||
{
|
||||
title: "Total Gasto",
|
||||
value: summary.totalSpent,
|
||||
isMoney: true,
|
||||
icon: RiMoneyDollarCircleLine,
|
||||
description: "Soma de todas as compras",
|
||||
},
|
||||
{
|
||||
title: "Ticket Médio",
|
||||
value: summary.avgPerTransaction,
|
||||
isMoney: true,
|
||||
icon: RiRepeatLine,
|
||||
description: "Média por transação",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{cards.map((card) => (
|
||||
<Card key={card.title}>
|
||||
<CardContent className="px-4 py-2">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
{card.title}
|
||||
</p>
|
||||
{card.isMoney ? (
|
||||
<MoneyValues
|
||||
className="text-2xl font-semibold"
|
||||
amount={card.value}
|
||||
/>
|
||||
) : (
|
||||
<p className="text-2xl font-semibold">{card.value}</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
<card.icon className="size-5 text-muted-foreground shrink-0" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
components/relatorios/estabelecimentos/top-categories.tsx
Normal file
97
components/relatorios/estabelecimentos/top-categories.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
"use client";
|
||||
|
||||
import { RiPriceTag3Line } from "@remixicon/react";
|
||||
import { CategoryIconBadge } from "@/components/categorias/category-icon-badge";
|
||||
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 { TopEstabelecimentosData } from "@/lib/relatorios/estabelecimentos/fetch-data";
|
||||
|
||||
type TopCategoriesProps = {
|
||||
categories: TopEstabelecimentosData["topCategories"];
|
||||
};
|
||||
|
||||
export function TopCategories({ categories }: TopCategoriesProps) {
|
||||
if (categories.length === 0) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiPriceTag3Line className="size-4 text-primary" />
|
||||
Principais Categorias
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<WidgetEmptyState
|
||||
icon={<RiPriceTag3Line className="size-6 text-muted-foreground" />}
|
||||
title="Nenhuma categoria encontrada"
|
||||
description="Quando houver despesas categorizadas, elas aparecerão aqui."
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const totalAmount = categories.reduce((acc, c) => acc + c.totalAmount, 0);
|
||||
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center gap-1.5 text-base">
|
||||
<RiPriceTag3Line className="size-4 text-primary" />
|
||||
Principais Categorias
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex flex-col">
|
||||
{categories.map((category, index) => {
|
||||
const percent =
|
||||
totalAmount > 0 ? (category.totalAmount / totalAmount) * 100 : 0;
|
||||
|
||||
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">
|
||||
<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">
|
||||
{percent.toFixed(0)}% do total •{" "}
|
||||
{category.transactionCount}x
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Value */}
|
||||
<div className="flex shrink-0 flex-col items-end">
|
||||
<MoneyValues
|
||||
className="text-foreground"
|
||||
amount={category.totalAmount}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="ml-11 mt-1.5">
|
||||
<Progress className="h-1.5" value={percent} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user