45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { useAuth } from '../../../contexts/AuthContext';
|
|
import { Card } from '../../dashboard/Card';
|
|
import api from '../../../services/api';
|
|
import { formatCurrency } from '../../../utils/formatters';
|
|
|
|
export const KPIsFinanceiros: React.FC = () => {
|
|
const { user } = useAuth();
|
|
|
|
if (!['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '')) {
|
|
return null;
|
|
}
|
|
|
|
const { data: stats } = useQuery('financeiroKPIs', async () => {
|
|
const response = await api.get('/dashboard/financeiro/stats');
|
|
return response.data;
|
|
});
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<Card
|
|
title="Faturamento Previsto"
|
|
value={formatCurrency(stats?.previsaoFaturamento || 0)}
|
|
trend={stats?.crescimentoFaturamento}
|
|
icon="BanknotesIcon"
|
|
color="green"
|
|
/>
|
|
<Card
|
|
title="Taxa de Sucesso"
|
|
value={`${stats?.taxaSucesso || 0}%`}
|
|
trend={stats?.crescimentoTaxaSucesso}
|
|
icon="ChartBarIcon"
|
|
color="blue"
|
|
/>
|
|
<Card
|
|
title="Custas em Aberto"
|
|
value={formatCurrency(stats?.custasEmAberto || 0)}
|
|
icon="ExclamationTriangleIcon"
|
|
color="yellow"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|