From 6e8b8f5b54559fabcb43bd511312254bde1d42b5 Mon Sep 17 00:00:00 2001
From: admtracksteel <admtracksteel@gmail.com>
Date: Mon, 22 Jun 2026 23:23:34 +0000
Subject: [PATCH] Deploy Inicial do SteelCheck com Docker Build Automatizado

---
 components/ReportDisplay.tsx | 138 ++++++++++++++++++-----------------
 1 file changed, 70 insertions(+), 68 deletions(-)

diff --git a/components/ReportDisplay.tsx b/components/ReportDisplay.tsx
index 30f7e95..cdf6ecb 100644
--- a/components/ReportDisplay.tsx
+++ b/components/ReportDisplay.tsx
@@ -59,32 +59,34 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
   const confidence = report?.confidence || 0;
 
   return (
-    <div className="space-y-8 animate-fade-in pb-12">
-      <div className="text-center space-y-2">
-        <h2 className="text-3xl md:text-4xl font-display font-bold text-slate-900 dark:text-white">Relatório Técnico de Qualidade</h2>
-        <p className="text-slate-500 dark:text-slate-400">Análise de conformidade normativa assistida por IA</p>
-      </div>
-
-      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-8 rounded-2xl text-center relative overflow-hidden">
+    <div className="space-y-5 animate-fade-in pb-8">
+      <div className="flex flex-col md:flex-row justify-between items-center bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-md p-4 md:p-5 rounded-2xl relative overflow-hidden">
         <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
-        <h3 className="text-lg font-medium text-slate-500 dark:text-slate-400 mb-2 uppercase tracking-wide">Grau de Confiança da Análise</h3>
-        <div className="flex justify-center items-end gap-2">
-          <span className="text-6xl sm:text-7xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-br from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400">{confidence}</span>
-          <span className="text-3xl font-bold text-slate-400 mb-2">%</span>
+        <div className="text-left w-full md:w-auto mb-3 md:mb-0">
+          <h2 className="text-2xl md:text-3xl font-display font-bold text-slate-900 dark:text-white">Relatório Técnico de Qualidade</h2>
+          <p className="text-sm text-slate-500 dark:text-slate-400">Análise de conformidade normativa assistida por IA</p>
+        </div>
+
+        <div className="text-left md:text-right flex flex-col items-start md:items-end w-full md:w-auto shrink-0">
+          <h3 className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1 uppercase tracking-wide">Grau de Confiança da Análise</h3>
+          <div className="flex justify-start md:justify-end items-end gap-1">
+            <span className="text-4xl sm:text-5xl font-display font-bold bg-clip-text text-transparent bg-gradient-to-br from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 leading-none">{confidence}</span>
+            <span className="text-2xl font-bold text-slate-400 leading-none">%</span>
+          </div>
         </div>
       </div>
 
       {/* Identification Section */}
-      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl rounded-2xl overflow-hidden">
-        <div className="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
-          <h3 className="text-xl font-display font-bold text-slate-800 dark:text-white">1. Dados de Identificação</h3>
+      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden">
+        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
+          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">1. Dados de Identificação</h3>
         </div>
-        <div className="p-6">
-          <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4">
+        <div className="p-4 md:p-5">
+          <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3">
             {Object.entries(identification).map(([key, value]) => (
-              <li key={key} className="flex flex-col border-b border-slate-100 dark:border-slate-800/50 pb-3 last:border-0 last:pb-0">
-                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">{key.replace(/([A-Z])/g, ' $1')}</span>
-                <span className="text-lg font-medium text-slate-800 dark:text-slate-200">{value}</span>
+              <li key={key} className="flex flex-col border-b border-slate-100 dark:border-slate-800/50 pb-2 last:border-0 last:pb-0">
+                <span className="text-[10px] md:text-xs font-bold text-slate-400 uppercase tracking-wider mb-0.5">{key.replace(/([A-Z])/g, ' $1')}</span>
+                <span className="text-base font-medium text-slate-800 dark:text-slate-200">{value}</span>
               </li>
             ))}
           </ul>
@@ -92,28 +94,28 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
       </div>
 
       {/* Compliance Section */}
-      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl rounded-2xl overflow-hidden">
-        <div className="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
-          <h3 className="text-xl font-display font-bold text-slate-800 dark:text-white">2. Verificação de Conformidade</h3>
-          <div className={`px-4 py-1.5 rounded-full font-bold text-sm uppercase tracking-wide border shadow-sm ${statusClass(compliance.status)}`}>
+      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden">
+        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm flex flex-col md:flex-row md:items-center justify-between gap-3">
+          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">2. Verificação de Conformidade</h3>
+          <div className={`px-3 py-1 rounded-full font-bold text-xs uppercase tracking-wide border shadow-sm ${statusClass(compliance.status)}`}>
             {compliance.status}
           </div>
         </div>
 
-        <div className="p-6 space-y-8">
+        <div className="p-4 md:p-5 space-y-6">
           <div>
-            <h4 className="flex items-center gap-2 font-display font-semibold text-lg mb-4 text-slate-800 dark:text-slate-200">
-              <span className="w-1.5 h-6 bg-blue-500 rounded-full"></span>
+            <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
+              <span className="w-1 h-5 bg-blue-500 rounded-full"></span>
               Análise de Propriedades Mecânicas
             </h4>
             <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse">
-                <thead className="hidden md:table-header-group text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b-2 border-slate-100 dark:border-slate-700">
+              <table className="w-full text-left border-collapse text-sm">
+                <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                   <tr>
-                    <th className="py-3 px-6 font-semibold">Propriedade</th>
-                    <th className="py-3 px-6 font-semibold">Norma</th>
-                    <th className="py-3 px-6 font-semibold">Certificado</th>
-                    <th className="py-3 px-6 font-semibold w-32">Status</th>
+                    <th className="py-2 px-4 font-semibold">Propriedade</th>
+                    <th className="py-2 px-4 font-semibold">Norma</th>
+                    <th className="py-2 px-4 font-semibold">Certificado</th>
+                    <th className="py-2 px-4 font-semibold w-28">Status</th>
                   </tr>
                 </thead>
                 <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
@@ -124,18 +126,18 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
           </div>
 
           <div>
-            <h4 className="flex items-center gap-2 font-display font-semibold text-lg mb-4 text-slate-800 dark:text-slate-200">
-              <span className="w-1.5 h-6 bg-purple-500 rounded-full"></span>
+            <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
+              <span className="w-1 h-5 bg-purple-500 rounded-full"></span>
               Análise de Composição Química (%)
             </h4>
             <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse">
-                <thead className="hidden md:table-header-group text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b-2 border-slate-100 dark:border-slate-700">
+              <table className="w-full text-left border-collapse text-sm">
+                <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                   <tr>
-                    <th className="py-3 px-6 font-semibold">Elemento</th>
-                    <th className="py-3 px-6 font-semibold">Norma</th>
-                    <th className="py-3 px-6 font-semibold">Certificado</th>
-                    <th className="py-3 px-6 font-semibold w-32">Status</th>
+                    <th className="py-2 px-4 font-semibold">Elemento</th>
+                    <th className="py-2 px-4 font-semibold">Norma</th>
+                    <th className="py-2 px-4 font-semibold">Certificado</th>
+                    <th className="py-2 px-4 font-semibold w-28">Status</th>
                   </tr>
                 </thead>
                 <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
@@ -146,18 +148,18 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
           </div>
           {compliance.otherTests.length > 0 && (
             <div>
-              <h4 className="flex items-center gap-2 font-display font-semibold text-lg mb-4 text-slate-800 dark:text-slate-200">
-                <span className="w-1.5 h-6 bg-emerald-500 rounded-full"></span>
+              <h4 className="flex items-center gap-2 font-display font-semibold text-base mb-3 text-slate-800 dark:text-slate-200">
+                <span className="w-1 h-5 bg-emerald-500 rounded-full"></span>
                 Outros Testes
               </h4>
               <div className="overflow-x-auto">
-                <table className="w-full text-left border-collapse">
-                  <thead className="hidden md:table-header-group text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b-2 border-slate-100 dark:border-slate-700">
+                <table className="w-full text-left border-collapse text-sm">
+                  <thead className="hidden md:table-header-group text-[10px] md:text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 border-b border-slate-200 dark:border-slate-700">
                     <tr>
-                      <th className="py-3 px-6 font-semibold">Teste</th>
-                      <th className="py-3 px-6 font-semibold">Norma</th>
-                      <th className="py-3 px-6 font-semibold">Certificado</th>
-                      <th className="py-3 px-6 font-semibold w-32">Status</th>
+                      <th className="py-2 px-4 font-semibold">Teste</th>
+                      <th className="py-2 px-4 font-semibold">Norma</th>
+                      <th className="py-2 px-4 font-semibold">Certificado</th>
+                      <th className="py-2 px-4 font-semibold w-28">Status</th>
                     </tr>
                   </thead>
                   <tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
@@ -172,21 +174,21 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
 
       {/* Over-Performance Section */}
       {compliance.status === 'CONFORME' && overPerformance.length > 0 && (
-        <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl rounded-2xl overflow-hidden border-l-4 border-l-green-500">
-          <div className="px-6 py-4 bg-green-50/50 dark:bg-green-900/10 border-b border-green-100 dark:border-green-900/30">
-            <h3 className="text-xl font-display font-bold text-green-800 dark:text-green-300">3. Destaques de Desempenho</h3>
+        <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-sm rounded-xl overflow-hidden border-l-4 border-l-green-500">
+          <div className="px-5 py-3 bg-green-50/50 dark:bg-green-900/10 border-b border-green-100 dark:border-green-900/30">
+            <h3 className="text-lg font-display font-bold text-green-800 dark:text-green-300">3. Destaques de Desempenho</h3>
           </div>
-          <div className="p-6">
-            <p className="text-sm text-slate-600 dark:text-slate-400 mb-6">Este material excede os requisitos mínimos normativos nos seguintes aspectos:</p>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-4 md:p-5">
+            <p className="text-xs md:text-sm text-slate-600 dark:text-slate-400 mb-4">Este material excede os requisitos mínimos normativos nos seguintes aspectos:</p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               {overPerformance.map((item, i) => (
-                <div key={i} className="flex items-start gap-4 p-4 rounded-xl bg-white/50 dark:bg-slate-800/50 border border-green-100 dark:border-green-900/30 shadow-sm">
-                  <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-full text-green-600 dark:text-green-400 shrink-0">
-                    <CheckCircleIcon className="w-5 h-5" />
+                <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-white/50 dark:bg-slate-800/50 border border-green-100 dark:border-green-900/30 shadow-sm">
+                  <div className="p-1.5 bg-green-100 dark:bg-green-900/30 rounded-full text-green-600 dark:text-green-400 shrink-0">
+                    <CheckCircleIcon className="w-4 h-4" />
                   </div>
                   <div>
-                    <span className="block font-semibold text-slate-800 dark:text-slate-200">{item.property}</span>
-                    <span className="text-green-600 dark:text-green-400 text-sm font-medium">{item.value} superior ao mínimo.</span>
+                    <span className="block font-semibold text-sm text-slate-800 dark:text-slate-200">{item.property}</span>
+                    <span className="text-green-600 dark:text-green-400 text-xs font-medium">{item.value} superior ao mínimo.</span>
                   </div>
                 </div>
               ))}
@@ -196,17 +198,17 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
       )}
 
       {/* Equivalents Section */}
-      <div className="glass-panel rounded-2xl overflow-hidden">
-        <div className="px-6 py-4 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
-          <h3 className="text-xl font-display font-bold text-slate-800 dark:text-white">4. Normas Equivalentes</h3>
+      <div className="glass-panel rounded-xl overflow-hidden shadow-sm">
+        <div className="px-5 py-3 bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200/50 dark:border-slate-700/50 backdrop-blur-sm">
+          <h3 className="text-lg font-display font-bold text-slate-800 dark:text-white">4. Normas Equivalentes</h3>
         </div>
-        <div className="p-6">
-          <p className="text-sm text-slate-500 dark:text-slate-400 mb-6">Equivalências internacionais para <span className="font-semibold text-slate-700 dark:text-slate-300">{identification.standards}</span>:</p>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div className="p-4 md:p-5">
+          <p className="text-xs md:text-sm text-slate-500 dark:text-slate-400 mb-4">Equivalências internacionais para <span className="font-semibold text-slate-700 dark:text-slate-300">{identification.standards}</span>:</p>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
             {equivalents.map((item, i) => (
-              <div key={i} className="group p-4 rounded-xl bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-800/50 border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-all hover:-translate-y-1">
-                <p className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-1 group-hover:text-blue-500 transition-colors">{item.system}</p>
-                <p className="font-bold text-slate-800 dark:text-slate-200 font-mono text-lg">{item.norm}</p>
+              <div key={i} className="group p-3 rounded-lg bg-gradient-to-br from-slate-50 to-white dark:from-slate-800 dark:to-slate-800/50 border border-slate-200 dark:border-slate-700 shadow-sm hover:shadow-md transition-all">
+                <p className="text-[10px] md:text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5 group-hover:text-blue-500 transition-colors">{item.system}</p>
+                <p className="font-bold text-slate-800 dark:text-slate-200 font-mono text-base">{item.norm}</p>
               </div>
             ))}
           </div>