refactor(App): simplificar a estrutura do componente e remover gráficos não utilizados

src/App.tsx

@@ -8,23 +8,12 @@ import {
 } from '@/views/components/ui/card';
 import {
   ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
 } from '@/views/components/ui/chart';
 import { Progress } from '@/views/components/ui/progress';
 import { TrendingUp } from 'lucide-react';
-import {
+import { Bar, BarChart, CartesianGrid, Pie, PieChart, XAxis } from 'recharts';
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  XAxis,
-} from 'recharts';
 
 import { Header } from './views/components/header';
 
@@ -34,36 +23,35 @@ export const description = 'A stacked bar chart with a legend';
 export function App() {
   const stats = [
     {
-      title: 'Média de Consumo (R$)',
+      title: 'Protocolos criados',
       value: 'R$ 0,00',
       description: '',
       progress: 44.6,
     },
     {
-      title: 'Total de KM Percorridos',
+      title: 'Protocolos tramitados',
       value: '0 KM',
       description: '',
       progress: 30.6,
     },
     {
-      title: 'Viagens Realizadas no Mês',
+      title: 'Protocolos recebidos',
       value: '0',
       description: '',
       progress: 24.8,
     },
-  ];
+    {
-
+      title: 'Protocolos finalizados',
-  const evolutionConfig = {
+      value: '0',
-    price: {
+      description: '',
-      label: 'Preço',
+      progress: 67.2,
-      color: '#007cb8',
+    },
+    {
+      title: 'Protocolos cancelados',
+      value: '0',
+      description: '',
+      progress: 67.2,
     },
-  } satisfies ChartConfig;
-
-  const evolutionData = [
-    { month: 'Shell', price: 186 },
-    { month: 'Ipiranga', price: 305 },
-    { month: 'BR', price: 237 },
   ];
 
   const bestPricesConfig = {
@@ -106,31 +94,11 @@ export function App() {
     { status: 'reserved', count: 15, fill: '#7cd5fd' },
   ];
 
-  const mileageConfig = {
-    company: {
-      label: 'Frota Empresa',
-      color: '#007cb8',
-    },
-    rented: {
-      label: 'Frota Terceirizada',
-      color: '#0ca9eb',
-    },
-  } satisfies ChartConfig;
-
-  const mileageData = [
-    { month: 'Jan', company: 1200, rented: 800 },
-    { month: 'Fev', company: 1350, rented: 750 },
-    { month: 'Mar', company: 1100, rented: 900 },
-    { month: 'Abr', company: 1400, rented: 600 },
-    { month: 'Mai', company: 1250, rented: 850 },
-    { month: 'Jun', company: 1300, rented: 700 },
-  ];
-
   return (
     <div className="p-[18px] flex flex-col gap-6">
       <Header />
 
-      <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3">
+      <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-2 xl:grid-cols-5">
         {stats.map((stat) => (
           <Card
             key={stat.title}
@@ -152,50 +120,6 @@ export function App() {
       </div>
 
       <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Evolução do Consumo de Combustível</CardTitle>
-            <CardDescription>
-              Comparativo de preços entre os principais postos
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer config={evolutionConfig}>
-              <LineChart
-                accessibilityLayer
-                data={evolutionData}
-                margin={{
-                  left: 12,
-                  right: 12,
-                }}>
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  dataKey="month"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                />
-                <ChartTooltip
-                  cursor={false}
-                  content={<ChartTooltipContent hideLabel />}
-                />
-                <Line
-                  dataKey="price"
-                  type="natural"
-                  stroke="var(--color-price)"
-                  strokeWidth={2}
-                  dot={{
-                    fill: 'var(--color-price)',
-                  }}
-                  activeDot={{
-                    r: 6,
-                  }}
-                />
-              </LineChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-
         <Card>
           <CardHeader>
             <CardTitle>Postos com Melhor Preço</CardTitle>
@@ -223,42 +147,6 @@ export function App() {
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Quilometragem Percorrida</CardTitle>
-            <CardDescription>
-              Total de quilômetros percorridos nos últimos meses
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <ChartContainer config={mileageConfig}>
-              <BarChart accessibilityLayer data={mileageData}>
-                <CartesianGrid vertical={false} />
-                <XAxis
-                  dataKey="month"
-                  tickLine={false}
-                  tickMargin={10}
-                  axisLine={false}
-                />
-                <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-                <ChartLegend content={<ChartLegendContent />} />
-                <Bar
-                  dataKey="company"
-                  stackId="a"
-                  fill="var(--color-company)"
-                  radius={[0, 0, 4, 4]}
-                />
-                <Bar
-                  dataKey="rented"
-                  stackId="a"
-                  fill="var(--color-rented)"
-                  radius={[4, 4, 0, 0]}
-                />
-              </BarChart>
-            </ChartContainer>
-          </CardContent>
-        </Card>
-
         <Card className="flex flex-col">
           <CardHeader className="items-center pb-0">
             <CardTitle>Status dos Veículos</CardTitle>