62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { Card } from '../Card';
|
|
import api from '../../../services/api';
|
|
|
|
export const TarefasStats: React.FC = () => {
|
|
const { data: stats } = useQuery('tarefasStats', async () => {
|
|
try {
|
|
const response = await api.get('/dashboard/tarefas/stats');
|
|
return response.data;
|
|
} catch (error) {
|
|
console.error('Erro ao buscar estatísticas:', error);
|
|
return {
|
|
pendentes: 0,
|
|
atrasadas: 0,
|
|
concluidas: 0,
|
|
total: 0,
|
|
taxaConclusao: 0,
|
|
porStatus: { PENDENTE: 0 }
|
|
};
|
|
}
|
|
});
|
|
|
|
const defaultStats = {
|
|
pendentes: 0,
|
|
atrasadas: 0,
|
|
concluidas: 0,
|
|
total: 0,
|
|
taxaConclusao: 0,
|
|
porStatus: { PENDENTE: 0 }
|
|
};
|
|
|
|
const safeStats = stats || defaultStats;
|
|
|
|
return (
|
|
<div className="grid gap-4">
|
|
<Card
|
|
title="Tarefas Pendentes"
|
|
value={safeStats.porStatus?.PENDENTE || 0}
|
|
trend={safeStats.atrasadas}
|
|
trendLabel="atrasadas"
|
|
icon="ClipboardDocumentList"
|
|
color="yellow"
|
|
/>
|
|
<Card
|
|
title="Para Hoje"
|
|
value={safeStats.pendentes || 0}
|
|
icon="Clock"
|
|
color="blue"
|
|
/>
|
|
<Card
|
|
title="Concluídas (Mês)"
|
|
value={safeStats.concluidas || 0}
|
|
trend={safeStats.taxaConclusao}
|
|
trendLabel="taxa de conclusão"
|
|
icon="CheckCircle"
|
|
color="green"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|