feat(App): atualizar visualização de protocolos com novas métricas e gráficos

src/App.tsx

@@ -18,46 +18,35 @@ import { Header } from './views/components/header';
 
 import type { ChartConfig } from './views/components/ui/chart';
 import { ProtocolsDashboard } from './views/protocols/protocols-dashboard';
-export const description = 'A stacked bar chart with a legend';
+export const description =
+  'Métricas de protocolos — tipos e status (gestão pública)';
 
-const bestPricesConfig = {
-  price: {
-    label: 'Preço',
-    color: '#007cb8',
-  },
+const protocolsByTypeConfig = {
+  licitacao: { label: 'Licitações', color: '#0b69a3' },
+  contrato: { label: 'Contratos', color: '#007cb8' },
+  convenio: { label: 'Convênios', color: '#36c1fa' },
+  termo: { label: 'Termos Aditivos', color: '#7cd5fd' },
 } satisfies ChartConfig;
 
-const bestPricesData = [
-  { station: 'Shell', price: 5.42 },
-  { station: 'Ipiranga', price: 5.35 },
-  { station: 'BR', price: 5.38 },
-  { station: 'Ale', price: 5.3 },
+const protocolsByTypeData = [
+  { type: 'Licitação', count: 32 },
+  { type: 'Contrato', count: 48 },
+  { type: 'Convênio', count: 18 },
+  { type: 'Termo Aditivo', count: 7 },
 ];
 
-const vehicleStatusConfig = {
-  active: {
-    label: 'Ativos',
-    color: '#007cb8',
-  },
-  maintenance: {
-    label: 'Manutenção',
-    color: '#0ca9eb',
-  },
-  inactive: {
-    label: 'Inativos',
-    color: '#36c1fa',
-  },
-  reserved: {
-    label: 'Reservados',
-    color: '#7cd5fd',
-  },
+const protocolStatusConfig = {
+  andamento: { label: 'Em andamento', color: '#007cb8' },
+  concluido: { label: 'Concluído', color: '#0ca9eb' },
+  suspenso: { label: 'Suspenso', color: '#36c1fa' },
+  cancelado: { label: 'Cancelado', color: '#7cd5fd' },
 } satisfies ChartConfig;
 
-const vehicleStatusData = [
-  { status: 'active', count: 45, fill: '#007cb8' },
-  { status: 'maintenance', count: 12, fill: '#0ca9eb' },
-  { status: 'inactive', count: 8, fill: '#36c1fa' },
-  { status: 'reserved', count: 15, fill: '#7cd5fd' },
+const protocolStatusData = [
+  { status: 'andamento', count: 65, fill: '#007cb8' },
+  { status: 'concluido', count: 20, fill: '#0ca9eb' },
+  { status: 'suspenso', count: 8, fill: '#36c1fa' },
+  { status: 'cancelado', count: 7, fill: '#7cd5fd' },
 ];
 
 export function App() {
@@ -70,17 +59,17 @@ export function App() {
       <div className="grid gap-6 grid-cols-1 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle>Postos com Melhor Preço</CardTitle>
+            <CardTitle>Protocolos por Tipo</CardTitle>
             <CardDescription>
-              Comparativo de preços entre os principais postos
+              Distribuição de protocolos por tipo de procedimento
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ChartContainer config={bestPricesConfig}>
-              <BarChart accessibilityLayer data={bestPricesData}>
+            <ChartContainer config={protocolsByTypeConfig}>
+              <BarChart accessibilityLayer data={protocolsByTypeData}>
                 <CartesianGrid vertical={false} />
                 <XAxis
-                  dataKey="station"
+                  dataKey="type"
                   tickLine={false}
                   tickMargin={10}
                   axisLine={false}
@@ -89,7 +78,7 @@ export function App() {
                   cursor={false}
                   content={<ChartTooltipContent hideLabel />}
                 />
-                <Bar dataKey="price" fill="var(--color-price)" radius={8} />
+                <Bar dataKey="count" fill="#0b69a3" radius={8} />
               </BarChart>
             </ChartContainer>
           </CardContent>
@@ -97,19 +86,19 @@ export function App() {
 
         <Card className="flex flex-col">
           <CardHeader className="items-center pb-0">
-            <CardTitle>Status dos Veículos</CardTitle>
+            <CardTitle>Status dos Protocolos</CardTitle>
             <CardDescription>
-              Distribuição dos veículos por status de operação
+              Visão geral do status operacional dos protocolos
             </CardDescription>
           </CardHeader>
           <CardContent className="flex-1 pb-0">
             <ChartContainer
-              config={vehicleStatusConfig}
+              config={protocolStatusConfig}
               className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-80 pb-0">
               <PieChart>
                 <ChartTooltip content={<ChartTooltipContent hideLabel />} />
                 <Pie
-                  data={vehicleStatusData}
+                  data={protocolStatusData}
                   dataKey="count"
                   label
                   nameKey="status"
@@ -119,11 +108,10 @@ export function App() {
           </CardContent>
           <CardFooter className="flex-col gap-2 text-sm">
             <div className="flex items-center gap-2 leading-none font-medium">
-              Frota operando com 85% de disponibilidade{' '}
-              <TrendingUp className="h-4 w-4" />
+              65% dos protocolos em andamento <TrendingUp className="h-4 w-4" />
             </div>
             <div className="text-muted-foreground leading-none">
-              Status atual da frota de veículos
+              Resumo dos principais status dos protocolos
             </div>
           </CardFooter>
         </Card>