51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { useQuery } from 'react-query';
|
|
import { format, differenceInDays } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
|
import api from '../../services/api';
|
|
|
|
export const AlertasPrazos: React.FC = () => {
|
|
const { data: prazos = [] } = useQuery('prazosFuturos', async () => {
|
|
const response = await api.get('/dashboard/prazos/proximos');
|
|
return response.data;
|
|
});
|
|
|
|
const getPrioridadeStyle = (dias: number) => {
|
|
if (dias <= 3) return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
|
|
if (dias <= 7) return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
|
|
return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
|
|
Prazos Próximos
|
|
</h2>
|
|
<ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
|
|
</div>
|
|
<div className="space-y-4">
|
|
{prazos.map((prazo: any) => {
|
|
const dias = differenceInDays(new Date(prazo.dataLimite), new Date());
|
|
return (
|
|
<div key={prazo.id} className="flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{prazo.descricao}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
Processo: {prazo.processo.numero}
|
|
</p>
|
|
</div>
|
|
<span className={`px-2 py-1 rounded-full text-xs ${getPrioridadeStyle(dias)}`}>
|
|
{format(new Date(prazo.dataLimite), 'dd/MM/yyyy', { locale: ptBR })}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|