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

app/(dashboard)/top-estabelecimentos/layout.tsx

@@ -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>
+  );
+}

app/(dashboard)/top-estabelecimentos/page.tsx

@@ -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">
+    <main className="flex flex-col gap-4">
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      <Card className="p-3 flex-row justify-between items-center">
-        <div className="flex flex-col gap-1">
+        <span className="text-sm text-muted-foreground">
-          <h1 className="text-2xl font-semibold tracking-tight">
+          Selecione o período
-            Top Estabelecimentos
+        </span>
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            Análise dos locais onde você mais compra • {data.periodLabel}
-          </p>
-        </div>
         <PeriodFilterButtons currentFilter={periodFilter} />
-      </div>
+      </Card>
 
       <SummaryCards summary={data.summary} />
 

components/top-estabelecimentos/establishments-list.tsx

@@ -1,12 +1,13 @@
 "use client";
 
+import MoneyValues from "@/components/money-values";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import MoneyValues from "@/components/money-values";
 import { WidgetEmptyState } from "@/components/widget-empty-state";
 import type { TopEstabelecimentosData } from "@/lib/top-estabelecimentos/fetch-data";
 import { title_font } from "@/public/fonts/font_index";
 import { RiStore2Line } from "@remixicon/react";
+import { Progress } from "../ui/progress";
 
 type EstablishmentsListProps = {
   establishments: TopEstabelecimentosData["establishments"];
@@ -119,16 +120,12 @@ export function EstablishmentsList({
 
                 {/* Progress bar */}
                 <div className="ml-12 mt-1.5">
-                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                  <Progress
-                    <div
+                    className="h-1.5"
-                      className="h-full bg-primary/50 rounded-full"
+                    value={(establishment.count / maxCount) * 100}
-                      style={{
-                        width: `${(establishment.count / maxCount) * 100}%`,
-                      }}
                   />
                 </div>
               </div>
-              </div>
             );
           })}
         </div>

components/top-estabelecimentos/period-filter.tsx

@@ -27,7 +27,7 @@ export function PeriodFilterButtons({ currentFilter }: PeriodFilterProps) {
 
   return (
     <div className="flex items-center gap-2">
-      <span className="text-sm text-muted-foreground">Período:</span>
+     
       <div className="flex items-center gap-1">
         {filterOptions.map((option) => (
           <Button

components/top-estabelecimentos/top-categories.tsx

@@ -12,6 +12,7 @@ import {
 import { getIconComponent } from "@/lib/utils/icons";
 import { title_font } from "@/public/fonts/font_index";
 import { RiPriceTag3Line } from "@remixicon/react";
+import { Progress } from "../ui/progress";
 
 type TopCategoriesProps = {
   categories: TopEstabelecimentosData["topCategories"];
@@ -110,15 +111,7 @@ export function TopCategories({ categories }: TopCategoriesProps) {
 
                 {/* Progress bar */}
                 <div className="ml-12 mt-1.5">
-                  <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                  <Progress className="h-1.5" value={percent} />
-                    <div
-                      className="h-full rounded-full"
-                      style={{
-                        width: `${percent}%`,
-                        backgroundColor: color,
-                      }}
-                    />
-                  </div>
                 </div>
               </div>
             );