first commit

src/components/dashboard/AlertasPrazos.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+};