forked from git.gladyson/openmonetis
refactor(top-estabelecimentos): atualiza layout e usa componente Progress
- Cria layout.tsx com PageDescription - Substitui barras de progresso customizadas por Progress - Remove label 'Período:' do filtro - Ajusta espaçamento do filtro na página
This commit is contained in:
23
app/(dashboard)/top-estabelecimentos/layout.tsx
Normal file
23
app/(dashboard)/top-estabelecimentos/layout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import PageDescription from "@/components/page-description";
|
||||
import { RiStore2Line } from "@remixicon/react";
|
||||
|
||||
export const metadata = {
|
||||
title: "Top Estabelecimentos | Opensheets",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="space-y-6 px-6">
|
||||
<PageDescription
|
||||
icon={<RiStore2Line />}
|
||||
title="Top Estabelecimentos"
|
||||
subtitle="Análise dos locais onde você mais compra e gasta"
|
||||
/>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { HighlightsCards } from "@/components/top-estabelecimentos/highlights-ca
|
||||
import { PeriodFilterButtons } from "@/components/top-estabelecimentos/period-filter";
|
||||
import { SummaryCards } from "@/components/top-estabelecimentos/summary-cards";
|
||||
import { TopCategories } from "@/components/top-estabelecimentos/top-categories";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { getUser } from "@/lib/auth/server";
|
||||
import {
|
||||
fetchTopEstabelecimentosData,
|
||||
@@ -50,18 +51,13 @@ export default async function TopEstabelecimentosPage({
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="@container/main flex flex-col gap-4 px-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">
|
||||
Top Estabelecimentos
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Análise dos locais onde você mais compra • {data.periodLabel}
|
||||
</p>
|
||||
</div>
|
||||
<main className="flex flex-col gap-4">
|
||||
<Card className="p-3 flex-row justify-between items-center">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Selecione o período
|
||||
</span>
|
||||
<PeriodFilterButtons currentFilter={periodFilter} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<SummaryCards summary={data.summary} />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user