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