dashboard: reimaginacao
Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user