feat(App): atualizar paleta de cores e status de protocolos

main
guilherme 2025-11-26 10:04:13 -03:00
parent 49be6da9f7
commit 56078dc539
2 changed files with 44 additions and 25 deletions

View File

@ -1,16 +1,5 @@
import { import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/views/components/ui/card';
Card, import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/views/components/ui/chart';
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/views/components/ui/card';
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/views/components/ui/chart';
import { TrendingUp } from 'lucide-react'; import { TrendingUp } from 'lucide-react';
import { Bar, BarChart, CartesianGrid, Pie, PieChart, XAxis } from 'recharts'; import { Bar, BarChart, CartesianGrid, Pie, PieChart, XAxis } from 'recharts';
@ -21,11 +10,25 @@ import { ProtocolsDashboard } from './views/protocols/protocols-dashboard';
export const description = export const description =
'Métricas de protocolos — tipos e status (gestão pública)'; 'Métricas de protocolos — tipos e status (gestão pública)';
const palette = {
50: '#F0F9FF',
100: '#E0F2FE',
200: '#B9E7FE',
300: '#7CD5FD',
400: '#36C1FA',
500: '#0CA9EB',
600: '#007CB8',
700: '#016BA3',
800: '#065B86',
900: '#0B4B6F',
950: '#07304A',
} as const;
const protocolsByTypeConfig = { const protocolsByTypeConfig = {
licitacao: { label: 'Licitações', color: '#0b69a3' }, licitacao: { label: 'Licitações', color: palette[700] },
contrato: { label: 'Contratos', color: '#007cb8' }, contrato: { label: 'Contratos', color: palette[600] },
convenio: { label: 'Convênios', color: '#36c1fa' }, convenio: { label: 'Convênios', color: palette[400] },
termo: { label: 'Termos Aditivos', color: '#7cd5fd' }, termo: { label: 'Termos Aditivos', color: palette[300] },
} satisfies ChartConfig; } satisfies ChartConfig;
const protocolsByTypeData = [ const protocolsByTypeData = [
@ -36,17 +39,32 @@ const protocolsByTypeData = [
]; ];
const protocolStatusConfig = { const protocolStatusConfig = {
andamento: { label: 'Em andamento', color: '#007cb8' }, Criado: { label: 'Criado', color: palette[950] },
concluido: { label: 'Concluído', color: '#0ca9eb' }, 'Aguardando Trâmite': { label: 'Aguardando Trâmite', color: palette[900] },
suspenso: { label: 'Suspenso', color: '#36c1fa' }, 'Aguardando Recebimento': {
cancelado: { label: 'Cancelado', color: '#7cd5fd' }, label: 'Aguardando Recebimento',
color: palette[800],
},
Enviado: { label: 'Enviado', color: palette[700] },
Recebido: { label: 'Recebido', color: palette[600] },
'Aguardando Entrega': { label: 'Aguardando Entrega', color: palette[500] },
Entregue: { label: 'Entregue', color: palette[400] },
Finalizado: { label: 'Finalizado', color: palette[300] },
Cancelado: { label: 'Cancelado', color: palette[200] },
Arquivado: { label: 'Arquivado', color: palette[100] },
} satisfies ChartConfig; } satisfies ChartConfig;
const protocolStatusData = [ const protocolStatusData = [
{ status: 'andamento', count: 65, fill: '#007cb8' }, { status: 'Criado', count: 12, fill: palette[950] },
{ status: 'concluido', count: 20, fill: '#0ca9eb' }, { status: 'Aguardando Trâmite', count: 20, fill: palette[900] },
{ status: 'suspenso', count: 8, fill: '#36c1fa' }, { status: 'Aguardando Recebimento', count: 10, fill: palette[800] },
{ status: 'cancelado', count: 7, fill: '#7cd5fd' }, { status: 'Enviado', count: 8, fill: palette[700] },
{ status: 'Recebido', count: 25, fill: palette[600] },
{ status: 'Aguardando Entrega', count: 5, fill: palette[500] },
{ status: 'Entregue', count: 7, fill: palette[400] },
{ status: 'Finalizado', count: 18, fill: palette[300] },
{ status: 'Cancelado', count: 3, fill: palette[200] },
{ status: 'Arquivado', count: 2, fill: palette[100] },
]; ];
export function App() { export function App() {

View File

@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Dialog, DialogTrigger } from '@/views/components/ui/dialog'; import { Dialog, DialogTrigger } from '@/views/components/ui/dialog';
import { useMemo, useState } from 'react'; import { useMemo, useState } from 'react';