dashboard: reimaginacao

Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed 2025-07-15 20:42:58 -03:00
1 parent b713e24fbf
commit b3d9ebe999
1 file changed
+38 -15
@@ -1,5 +1,6 @@
import React from 'react';
import { useBenchmarking } from '../../hooks/useBenchmarking';
import { CheckCircleIcon, XCircleIcon, FolderOpenIcon } from '@heroicons/react/24/solid';
export const BenchmarkingEscritorio: React.FC = () => {
// Hook para buscar e calcular benchmarking
@@ -9,23 +10,45 @@ export const BenchmarkingEscritorio: React.FC = () => {
if (error) return <div className="text-red-600">Erro ao buscar benchmarking</div>;
if (!benchmarking) return null;
// Cálculo da porcentagem de sucesso das causas
const totalCausas = benchmarking.procedentes + benchmarking.improcedentesOuSemMerito;
const sucessoPercent = totalCausas > 0 ? Math.round((benchmarking.procedentes / totalCausas) * 100) : 0;
return (
<div className="border rounded p-4 shadow flex flex-col gap-4">
<div>
<span className="font-semibold">Total de processos:</span>
<span className="ml-2 text-blue-700 font-bold">{benchmarking.totalProcessos}</span>
<div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-md mx-auto">
<div className="grid grid-cols-2 gap-4">
<div className="flex items-center gap-2 bg-blue-50 dark:bg-blue-900 rounded-lg p-3">
<FolderOpenIcon className="h-7 w-7 text-blue-600" />
<div>
<div className="text-xs text-gray-500">Total de processos</div>
<div className="text-lg font-bold text-blue-700 dark:text-blue-300">{benchmarking.totalProcessos}</div>
</div>
</div>
<div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
<CheckCircleIcon className="h-7 w-7 text-green-600" />
<div>
<div className="text-xs text-gray-500">Processos ativos</div>
<div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.ativos}</div>
</div>
</div>
<div className="flex items-center gap-2 bg-green-50 dark:bg-green-900 rounded-lg p-3">
<CheckCircleIcon className="h-7 w-7 text-green-600" />
<div>
<div className="text-xs text-gray-500">Julgados procedentes</div>
<div className="text-lg font-bold text-green-700 dark:text-green-300">{benchmarking.procedentes}</div>
</div>
</div>
<div className="flex items-center gap-2 bg-red-50 dark:bg-red-900 rounded-lg p-3">
<XCircleIcon className="h-7 w-7 text-red-600" />
<div>
<div className="text-xs text-gray-500">Improcedentes/Sem mérito</div>
<div className="text-lg font-bold text-red-700 dark:text-red-300">{benchmarking.improcedentesOuSemMerito}</div>
</div>
</div>
</div>
<div>
<span className="font-semibold">Processos ativos:</span>
<span className="ml-2 text-green-700 font-bold">{benchmarking.ativos}</span>
</div>
<div>
<span className="font-semibold">Julgados procedentes:</span>
<span className="ml-2 text-green-700 font-bold">{benchmarking.procedentes}</span>
</div>
<div>
<span className="font-semibold">Improcedentes/Sem análise de mérito:</span>
<span className="ml-2 text-red-700 font-bold">{benchmarking.improcedentesOuSemMerito}</span>
<div className="mt-4 flex flex-col items-center">
<span className="text-sm text-gray-500">% de sucesso das causas</span>
<span className="text-3xl font-extrabold text-green-600 dark:text-green-400">{sucessoPercent}%</span>
</div>
</div>
);