58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
|
import { format, differenceInDays } from "date-fns";
|
|
import { ptBR } from "date-fns/locale";
|
|
import React from "react";
|
|
import { useQuery } from "react-query";
|
|
|
|
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>
|
|
);
|
|
};
|