Upload components/Results.jsx with huggingface_hub

components/Results.jsx

@@ -1,11 +1,11 @@
-import { FiUser, FiBriefcase, FiMapPin, FiAlertCircle } from 'react-icons/fi';
+import { FiUser, FiBriefcase, FiMapPin, FiAlertCircle, FiBarChart2, FiFileText } from 'react-icons/fi';
 
 export default function Results({ data, loading, error }) {
   if (loading) {
     return (
       <div className="text-center py-8">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-        <p className="text-gray-600">Carregando dados...</p>
+        <p className="text-gray-600">Carregando dados e gerando análise...</p>
       </div>
     );
   }
@@ -35,37 +35,62 @@ export default function Results({ data, loading, error }) {
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {data.map((agent, index) => (
-        <div key={index} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
-          <div className="flex flex-col md:flex-row md:items-center md:justify-between">
-            <div className="flex items-center space-x-4 mb-4 md:mb-0">
-              <div className="bg-primary text-white rounded-full h-12 w-12 flex items-center justify-center font-bold text-xl">
-                {agent.name.charAt(0)}
+        <div key={index} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+          <div className="p-6">
+            <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+              <div className="flex items-center space-x-4 mb-4 md:mb-0">
+                <div className="bg-primary text-white rounded-full h-12 w-12 flex items-center justify-center font-bold text-xl">
+                  {agent.name.charAt(0)}
+                </div>
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 flex items-center">
+                    <FiUser className="mr-2" /> {agent.name}
+                  </h3>
+                  <p className="text-gray-600 flex items-center">
+                    <FiBriefcase className="mr-2" /> {agent.position}
+                  </p>
+                </div>
               </div>
-              <div>
-                <h3 className="text-lg font-semibold text-gray-900 flex items-center">
-                  <FiUser className="mr-2" /> {agent.name}
-                </h3>
-                <p className="text-gray-600 flex items-center">
-                  <FiBriefcase className="mr-2" /> {agent.position}
+              <div className="text-right">
+                <p className="text-gray-600 flex items-center justify-end md:justify-start">
+                  <FiMapPin className="mr-2" /> {agent.location}
                 </p>
+                <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${agent.status === 'ativo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
+                  {agent.status}
+                </span>
               </div>
             </div>
-            <div className="text-right">
-              <p className="text-gray-600 flex items-center justify-end md:justify-start">
-                <FiMapPin className="mr-2" /> {agent.location}
-              </p>
-              <span className={`inline-block px-2 py-1 rounded-full text-xs font-medium ${agent.status === 'ativo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
-                {agent.status}
-              </span>
-            </div>
+
+            {agent.details && (
+              <div className="mt-4 pt-4 border-t border-gray-200">
+                <p className="text-gray-700">{agent.details}</p>
+              </div>
+            )}
+
+            {agent.analysis && (
+              <div className="mt-4 pt-4 border-t border-gray-200">
+                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
+                  <FiBarChart2 className="mr-2" /> Análise Forense
+                </h4>
+                <p className="text-gray-700">{agent.analysis}</p>
+              </div>
+            )}
+
+            {agent.recommendations && (
+              <div className="mt-4 pt-4 border-t border-gray-200">
+                <h4 className="font-medium text-gray-900 mb-2 flex items-center">
+                  <FiFileText className="mr-2" /> Recomendações
+                </h4>
+                <ul className="list-disc list-inside text-gray-700 space-y-1">
+                  {agent.recommendations.map((rec, i) => (
+                    <li key={i}>{rec}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
           </div>
-          {agent.details && (
-            <div className="mt-4 pt-4 border-t border-gray-200">
-              <p className="text-gray-700">{agent.details}</p>
-            </div>
-          )}
         </div>
       ))}
     </div>