56 lines
2.8 KiB
TypeScript
56 lines
2.8 KiB
TypeScript
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
|
|
const { data: benchmarking, isLoading, error } = useBenchmarking();
|
|
|
|
if (isLoading) return <div>Carregando benchmarking...</div>;
|
|
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-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 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>
|
|
);
|
|
};
|