Deploy Inicial do SteelCheck com Docker Build Automatizado
This commit is contained in:
+232
-170
@@ -1,7 +1,5 @@
|
||||
|
||||
import React from 'react';
|
||||
import type { ReportData, ComplianceItem } from '../types';
|
||||
import { CheckCircleIcon, XCircleIcon, InfoIcon } from './Icons';
|
||||
|
||||
interface ReportDisplayProps {
|
||||
report: ReportData;
|
||||
@@ -11,209 +9,273 @@ const statusClass = (status: 'OK' | 'FALHA' | 'CONFORME' | 'NÃO CONFORME') => {
|
||||
switch (status) {
|
||||
case 'OK':
|
||||
case 'CONFORME':
|
||||
return 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800';
|
||||
return 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800';
|
||||
case 'FALHA':
|
||||
case 'NÃO CONFORME':
|
||||
return 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border border-red-200 dark:border-red-800';
|
||||
return 'text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 border border-red-200 dark:border-red-800';
|
||||
default:
|
||||
return 'text-slate-600 bg-slate-50 dark:bg-slate-800/50 dark:text-slate-400 border border-slate-200 dark:border-slate-700';
|
||||
}
|
||||
};
|
||||
|
||||
const statusIcon = (status: 'OK' | 'FALHA') => {
|
||||
return status === 'OK'
|
||||
? <CheckCircleIcon className="w-4 h-4" />
|
||||
: <XCircleIcon className="w-4 h-4" />;
|
||||
return status === 'OK' ? (
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
|
||||
) : (
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const ComplianceTableRow: React.FC<{ item: ComplianceItem; headerLabel: string }> = ({ item, headerLabel }) => (
|
||||
<tr className="block md:table-row mb-4 md:mb-0 bg-white/50 dark:bg-slate-800/50 md:bg-transparent rounded-xl md:rounded-none shadow-sm md:shadow-none border border-slate-100 dark:border-slate-700 md:border-b md:border-slate-200/50 md:dark:border-slate-700/50 last:border-0 hover:bg-white/80 dark:hover:bg-slate-800/80 transition-colors">
|
||||
<td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">{headerLabel}</span>
|
||||
<span className="font-medium text-slate-700 dark:text-slate-300">{item.property || item.element || item.test}</span>
|
||||
</td>
|
||||
<td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Norma</span>
|
||||
<span className="text-slate-500 dark:text-slate-400 text-sm font-mono">{item.norm}</span>
|
||||
</td>
|
||||
<td className="p-4 md:py-4 md:px-6 flex justify-between items-center border-b border-slate-100 dark:border-slate-700 md:border-0 md:table-cell">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Certificado</span>
|
||||
<span className="text-slate-800 dark:text-slate-200 font-semibold font-mono">{item.certificate}</span>
|
||||
</td>
|
||||
<td className="p-4 md:py-4 md:px-6 flex justify-between items-center md:table-cell">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 md:hidden">Status</span>
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold uppercase tracking-wide ${statusClass(item.status)}`}>
|
||||
{statusIcon(item.status)}
|
||||
{item.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
|
||||
const identification = report?.identification || {};
|
||||
const compliance = report?.compliance || { status: 'NÃO CONFORME', mechanical: [], chemical: [], otherTests: [] };
|
||||
const overPerformance = report?.overPerformance || [];
|
||||
const equivalents = report?.equivalents || [];
|
||||
const confidence = report?.confidence || 0;
|
||||
|
||||
return (
|
||||
<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>
|
||||
<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-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-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-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>
|
||||
</div>
|
||||
</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-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-4 md:p-5 space-y-6">
|
||||
<div className="animate-fade-in w-full max-w-[210mm] mx-auto bg-white dark:bg-slate-900 shadow-xl print:shadow-none print:m-0 print:p-[10mm_15mm] p-[10mm] sm:p-[16mm_20mm] relative flex flex-col justify-between text-slate-800 dark:text-slate-200 border border-slate-200 dark:border-slate-800 rounded-lg print:rounded-none min-h-[297mm]">
|
||||
|
||||
{/* Cabeçalho (Header) */}
|
||||
<header className="border-b border-slate-100 dark:border-slate-800 pb-5">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-0">
|
||||
<div>
|
||||
<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 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-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">
|
||||
{compliance.mechanical.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Propriedade" />)}
|
||||
</tbody>
|
||||
</table>
|
||||
{/* Logo SteelCheck com visual geométrico */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-extrabold px-2.5 py-1 rounded text-base tracking-tight">STEEL CHECK</span>
|
||||
<span className="text-[10px] uppercase font-bold tracking-widest text-slate-400 dark:text-slate-500 border border-slate-200 dark:border-slate-700 px-1.5 py-0.5 rounded">IA Quality Report</span>
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 mt-2.5">Relatório Técnico de Qualidade</h2>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">Análise de conformidade normativa assistida por inteligência artificial</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 w-full sm:w-auto justify-between sm:justify-end">
|
||||
{/* Status Global de Conformidade */}
|
||||
<div className="text-right flex flex-col items-end">
|
||||
<span className="text-[9px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Status Geral</span>
|
||||
<div className={`flex items-center gap-1.5 mt-1 px-3.5 py-1.5 rounded-full ${statusClass(compliance.status)}`}>
|
||||
<span className={`w-2 h-2 rounded-full animate-pulse ${compliance.status === 'CONFORME' ? 'bg-emerald-500' : 'bg-red-500'}`}></span>
|
||||
<span className="text-xs font-black tracking-wider">{compliance.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Score de Confiança da IA */}
|
||||
<div className="text-right flex flex-col items-end">
|
||||
<span className="text-[9px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500">Confiança da Análise</span>
|
||||
<div className="mt-1 bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 px-3 py-1.5 rounded-full text-xs font-bold">
|
||||
{confidence}% <span className="text-[10px] text-slate-400 dark:text-slate-500 font-normal">IA-Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<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 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-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">
|
||||
{compliance.chemical.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Elemento" />)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{compliance.otherTests.length > 0 && (
|
||||
{/* Conteúdo Principal */}
|
||||
<main className="flex-grow my-4 flex flex-col justify-start">
|
||||
|
||||
{/* Seção 1: Dados de Identificação */}
|
||||
<section className="mb-5">
|
||||
<h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||
1. Identificação do Produto e Lote
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-slate-50/70 dark:bg-slate-800/30 rounded-xl p-3.5 border border-slate-100 dark:border-slate-800">
|
||||
<div>
|
||||
<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>
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Produto</span>
|
||||
<span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.product || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Norma de Referência</span>
|
||||
<span className="block text-xs font-bold text-slate-900 dark:text-white leading-tight">{identification.standards || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Fabricante</span>
|
||||
<span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.manufacturer || '-'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Nº do Certificado</span>
|
||||
<span className="block text-xs font-mono font-bold text-slate-800 dark:text-slate-200 leading-tight">#{identification.certificateNumber || '-'}</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Data de Emissão</span>
|
||||
<span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.certificateDate || '-'}</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Lote analisado</span>
|
||||
<span className="block text-xs font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.batches || '-'}</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Corrida (Heat)</span>
|
||||
<span className="block text-xs font-mono font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.heats || '-'}</span>
|
||||
</div>
|
||||
<div className="pt-2 border-t border-slate-100 dark:border-slate-800">
|
||||
<span className="block text-[9px] text-slate-400 dark:text-slate-500 uppercase font-medium">Massa Total</span>
|
||||
<span className="block text-xs font-semibold text-slate-800 dark:text-slate-200 leading-tight">{identification.quantity || '-'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Seção 2: Verificação de Conformidade */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-12 gap-5 mb-5">
|
||||
|
||||
{/* Propriedades Mecânicas (Esquerda) */}
|
||||
<div className="col-span-1 md:col-span-5 flex flex-col">
|
||||
<h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||
2. Propriedades Mecânicas
|
||||
</h3>
|
||||
<div className="flex-grow border border-slate-100 dark:border-slate-800 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-sm flex flex-col justify-between">
|
||||
<div className="overflow-x-auto">
|
||||
<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-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>
|
||||
<table className="w-full text-left border-collapse text-xs">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 text-[9px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">
|
||||
<th className="py-2.5 px-3">Propriedade</th>
|
||||
<th className="py-2.5 px-2">Certificado</th>
|
||||
<th className="py-2.5 px-2 text-center">% Rel.</th>
|
||||
<th className="py-2.5 px-3 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="md:divide-y md:divide-slate-100 dark:md:divide-slate-700/50">
|
||||
{compliance.otherTests.map((item, i) => <ComplianceTableRow key={i} item={item} headerLabel="Teste" />)}
|
||||
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
|
||||
{compliance.mechanical.map((item, i) => {
|
||||
const isPositive = item.differencePercentage?.startsWith('+');
|
||||
const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
|
||||
return (
|
||||
<tr key={i}>
|
||||
<td className="py-2.5 px-3">
|
||||
<span className="font-semibold block text-slate-800 dark:text-slate-200">{item.property}</span>
|
||||
</td>
|
||||
<td className="py-2.5 px-2 font-mono font-bold text-slate-700 dark:text-slate-300">{item.certificate}</td>
|
||||
<td className="py-2.5 px-2 text-center">
|
||||
{item.differencePercentage ? (
|
||||
<span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
|
||||
) : <span className="text-slate-300 dark:text-slate-600">-</span>}
|
||||
</td>
|
||||
<td className="py-2.5 px-3 text-right">
|
||||
<span className={`inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded ${statusClass(item.status)}`}>
|
||||
{statusIcon(item.status)} {item.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{compliance.mechanical.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="py-4 text-center text-xs text-slate-400">Nenhum dado mecânico identificado</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="p-3 bg-slate-50/50 dark:bg-slate-800/20 border-t border-slate-50 dark:border-slate-800 text-[10px] text-slate-400 dark:text-slate-500">
|
||||
* Limites de conformidade validados conforme parâmetros da norma <span className="font-semibold text-slate-600 dark:text-slate-400">{identification.standards || '-'}</span>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Composição Química (Direita) */}
|
||||
<div className="col-span-1 md:col-span-7 flex flex-col">
|
||||
<h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||
3. Composição Química (%)
|
||||
</h3>
|
||||
<div className="flex-grow border border-slate-100 dark:border-slate-800 rounded-xl overflow-hidden bg-white dark:bg-slate-900 shadow-sm flex flex-col justify-start">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse text-xs">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800 text-[9px] text-slate-400 dark:text-slate-500 font-bold uppercase tracking-wider">
|
||||
<th className="py-2 px-3">Elem.</th>
|
||||
<th className="py-2 px-2">Norma de Referência</th>
|
||||
<th className="py-2 px-2">Valor Certificado</th>
|
||||
<th className="py-2 px-3 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
|
||||
{compliance.chemical.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td className="py-2 px-3 font-sans font-semibold text-slate-800 dark:text-slate-200">{item.element}</td>
|
||||
<td className="py-2 px-2 text-slate-400 dark:text-slate-500 text-[10px]">{item.norm}</td>
|
||||
<td className="py-2 px-2 font-bold text-slate-700 dark:text-slate-300">{item.certificate}</td>
|
||||
<td className="py-2 px-3 text-right">
|
||||
<span className={`inline-flex items-center text-[10px] font-bold px-1.5 py-0.5 rounded ${statusClass(item.status)}`}>
|
||||
{item.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{compliance.chemical.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="py-4 text-center text-xs text-slate-400">Nenhum dado químico identificado</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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-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-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-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-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>
|
||||
</section>
|
||||
|
||||
{/* Seção 3: Equivalências Internacionais */}
|
||||
<section className="mb-5">
|
||||
<h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-2.5 flex items-center gap-1.5">
|
||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||
4. Matriz de Equivalências Internacionais
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-center">
|
||||
{equivalents.length > 0 ? (
|
||||
equivalents.map((item, i) => (
|
||||
<div key={i} className="bg-slate-50 dark:bg-slate-800/30 border border-slate-100 dark:border-slate-800 rounded-lg p-2.5">
|
||||
<span className="block text-[8px] font-bold tracking-wider text-slate-400 dark:text-slate-500 uppercase">{item.system}</span>
|
||||
<span className="block text-xs font-black text-slate-700 dark:text-slate-300 mt-1">{item.norm}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-4 py-2 text-xs text-slate-400 text-left">Nenhuma equivalência normativa identificada no documento.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Equivalents Section */}
|
||||
<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-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-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>
|
||||
))}
|
||||
{/* Nota de Inteligência Artificial */}
|
||||
<section className="bg-indigo-50/40 dark:bg-indigo-900/10 border border-indigo-100/50 dark:border-indigo-800/30 rounded-xl p-3 flex gap-3 items-center">
|
||||
<div className="w-8 h-8 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shrink-0">
|
||||
<svg className="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904 9 21l-.813-5.096L3 15l5.096-.813L9 9l.813 5.096L15 15l-5.096.813ZM19.071 4.929l-.707 1.9.707 1.9-1.9-.707-1.9.707.707-1.9-.707-1.9 1.9.707 1.9-.707ZM17 11l-.354.954.954.354-.954.354-.354.954-.354-.954-.954-.354.954-.354.354-.954Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-[10px] font-bold text-indigo-950 dark:text-indigo-200 uppercase tracking-wide">Laudo Assistido por Inteligência Artificial</h4>
|
||||
<p className="text-[10px] text-slate-500 dark:text-slate-400 leading-normal mt-0.5">
|
||||
Os dados certificados deste lote foram analisados em tempo real contra as bibliotecas normativas globais de siderurgia. O status global é classificado como <span className="font-semibold text-slate-700 dark:text-slate-300">{compliance.status}</span>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
{/* Rodapé (Footer) */}
|
||||
<footer className="border-t border-slate-100 dark:border-slate-800 pt-3 mt-4 text-[10px] text-slate-400 dark:text-slate-500 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
<span><strong>ID Relatório:</strong> ST-{identification.certificateNumber || 'N/A'}/{new Date().getFullYear()}</span>
|
||||
<span className="hidden sm:inline">•</span>
|
||||
<span className="hidden sm:inline">SteelCheck Systems</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* QR Code Placeholder para visual de Autenticidade */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-right text-[9px] text-slate-400 dark:text-slate-500 leading-tight hidden sm:block">Para validar o certificado<br/><span className="font-bold text-slate-500 dark:text-slate-400">Acesse via QR Code</span></span>
|
||||
<svg className="w-7 h-7 text-slate-800 dark:text-slate-200" viewBox="0 0 100 100" fill="currentColor">
|
||||
<rect x="0" y="0" width="30" height="30" />
|
||||
<rect x="10" y="10" width="10" height="10" fill="white" />
|
||||
<rect x="70" y="0" width="30" height="30" />
|
||||
<rect x="80" y="10" width="10" height="10" fill="white" />
|
||||
<rect x="0" y="70" width="30" height="30" />
|
||||
<rect x="10" y="80" width="10" height="10" fill="white" />
|
||||
<rect x="40" y="40" width="20" height="20" />
|
||||
<rect x="70" y="70" width="10" height="10" />
|
||||
<rect x="80" y="80" width="20" height="20" />
|
||||
<rect x="40" y="10" width="10" height="20" />
|
||||
<rect x="10" y="40" width="20" height="10" />
|
||||
</svg>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SteelCheck — Relatório Técnico de Qualidade</title>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<!-- Google Fonts (Inter) -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Estilos base para simulação de folha A4 em tela */
|
||||
body {
|
||||
background-color: #f1f5f9;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.a4-page {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||||
margin: 20px auto;
|
||||
padding: 16mm 20mm;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Estilos específicos para Impressão */
|
||||
@media print {
|
||||
body {
|
||||
background-color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
.a4-page {
|
||||
box-shadow: none !important;
|
||||
margin: 0 !important;
|
||||
/* Reduz margens na impressão para garantir 1 página sem estourar */
|
||||
padding: 10mm 15mm !important;
|
||||
width: 100% !important;
|
||||
height: 100vh !important;
|
||||
max-height: 297mm !important;
|
||||
box-sizing: border-box;
|
||||
page-break-after: avoid;
|
||||
page-break-before: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased text-slate-800">
|
||||
|
||||
<!-- Painel de Controle Flutuante (Ocultado na Impressão) -->
|
||||
<div class="no-print max-w-[210mm] mx-auto mt-6 px-4 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-sm font-semibold text-slate-500 uppercase tracking-wider">Visualização do Documento</h1>
|
||||
<p class="text-xs text-slate-400">Otimizado para impressão direta em papel A4 (1 página)</p>
|
||||
</div>
|
||||
<button onclick="window.print()" class="flex items-center gap-2 bg-slate-900 hover:bg-slate-800 text-white px-4 py-2 rounded-lg text-xs font-semibold shadow transition-all duration-200">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4.5 h-4.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 1.252a1.125 1.125 0 0 1-1.107 1.328H7.218a1.125 1.125 0 0 1-1.107-1.328L6.34 18m11.32 0H6.34M12 11.25H9.75M12 9V11.25M12 11.25H14.25M18.75 6.75h.008v.008H18.75V6.75ZM15.75 6.75H6.75A2.25 2.25 0 0 0 4.5 9v5.25a2.25 2.25 0 0 0 2.25 2.25h10.5a2.25 2.25 0 0 0 2.25-2.25V9a2.25 2.25 0 0 0-2.25-2.25Z" />
|
||||
</svg>
|
||||
Imprimir Relatório
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Página Única A4 -->
|
||||
<div class="a4-page">
|
||||
|
||||
<!-- Cabeçalho (Header) -->
|
||||
<header class="border-b border-slate-100 pb-5">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<!-- Logo SteelCheck com visual geométrico -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-slate-900 text-white font-extrabold px-2.5 py-1 rounded text-base tracking-tight">STEEL CHECK</span>
|
||||
<span class="text-[10px] uppercase font-bold tracking-widest text-slate-400 border border-slate-200 px-1.5 py-0.5 rounded">IA Quality Report</span>
|
||||
</div>
|
||||
<h2 class="text-sm font-semibold text-slate-500 mt-2.5">Relatório Técnico de Qualidade</h2>
|
||||
<p class="text-xs text-slate-400">Análise de conformidade normativa assistida por inteligência artificial</p>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<!-- Status Global de Conformidade -->
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<span class="text-[9px] uppercase font-bold tracking-wider text-slate-400">Status Geral</span>
|
||||
<div class="flex items-center gap-1.5 mt-1 bg-emerald-50 border border-emerald-200 text-emerald-700 px-3.5 py-1.5 rounded-full">
|
||||
<span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-xs font-black tracking-wider">CONFORME</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Score de Confiança da IA -->
|
||||
<div class="text-right flex flex-col items-end">
|
||||
<span class="text-[9px] uppercase font-bold tracking-wider text-slate-400">Confiança da Análise</span>
|
||||
<div class="mt-1 bg-slate-50 border border-slate-200 text-slate-700 px-3 py-1.5 rounded-full text-xs font-bold">
|
||||
95% <span class="text-[10px] text-slate-400 font-normal">IA-Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Conteúdo Principal -->
|
||||
<main class="flex-grow my-4 flex flex-col justify-between">
|
||||
|
||||
<!-- Seção 1: Dados de Identificação (Grid de Cartões Limpos) -->
|
||||
<section class="mb-5">
|
||||
<h3 class="text-[10px] uppercase font-bold tracking-wider text-slate-400 mb-2.5 flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 bg-slate-400 rounded-full"></span>
|
||||
1. Identificação do Produto e Lote
|
||||
</h3>
|
||||
<div class="grid grid-cols-4 gap-3 bg-slate-50/70 rounded-xl p-3.5 border border-slate-100">
|
||||
<div>
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Produto</span>
|
||||
<span class="block text-xs font-semibold text-slate-800 leading-tight">Bobina Grossa (Hot Rolled)</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Norma de Referência</span>
|
||||
<span class="block text-xs font-bold text-slate-900 leading-tight">ASTM-A572-50-T1</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Fabricante</span>
|
||||
<span class="block text-xs font-semibold text-slate-800 leading-tight">USIMINAS</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Nº do Certificado</span>
|
||||
<span class="block text-xs font-mono font-bold text-slate-800 leading-tight">#999039</span>
|
||||
</div>
|
||||
<div class="pt-2 border-t border-slate-100">
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Data de Emissão</span>
|
||||
<span class="block text-xs font-semibold text-slate-800 leading-tight">04/07/2022</span>
|
||||
</div>
|
||||
<div class="pt-2 border-t border-slate-100">
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Lote analisado</span>
|
||||
<span class="block text-xs font-mono font-semibold text-slate-800 leading-tight">117006</span>
|
||||
</div>
|
||||
<div class="pt-2 border-t border-slate-100">
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Corrida (Heat)</span>
|
||||
<span class="block text-xs font-mono font-semibold text-slate-800 leading-tight">04490370</span>
|
||||
</div>
|
||||
<div class="pt-2 border-t border-slate-100">
|
||||
<span class="block text-[9px] text-slate-400 uppercase font-medium">Massa Total</span>
|
||||
<span class="block text-xs font-semibold text-slate-800 leading-tight">15,655 t</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Seção 2: Verificação de Conformidade (Lado a Lado para Máximo Aproveitamento) -->
|
||||
<section class="grid grid-cols-12 gap-5 mb-5">
|
||||
|
||||
<!-- Propriedades Mecânicas (Esquerda) -->
|
||||
<div class="col-span-5 flex flex-col">
|
||||
<h3 class="text-[10px] uppercase font-bold tracking-wider text-slate-400 mb-2.5 flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 bg-slate-400 rounded-full"></span>
|
||||
2. Propriedades Mecânicas
|
||||
</h3>
|
||||
<div class="flex-grow border border-slate-100 rounded-xl overflow-hidden bg-white shadow-sm flex flex-col justify-between">
|
||||
<table class="w-full text-left border-collapse text-xs">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-100 text-[10px] text-slate-400 font-bold uppercase tracking-wider">
|
||||
<th class="py-2.5 px-3">Propriedade</th>
|
||||
<th class="py-2.5 px-2">Certificado</th>
|
||||
<th class="py-2.5 px-3 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
<tr>
|
||||
<td class="py-2.5 px-3">
|
||||
<span class="font-semibold block text-slate-800">YS <span class="text-[10px] text-slate-400 font-normal">(Yield Strength)</span></span>
|
||||
</td>
|
||||
<td class="py-2.5 px-2 font-mono font-bold text-slate-700">455 MPa</td>
|
||||
<td class="py-2.5 px-3 text-right">
|
||||
<span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg> OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2.5 px-3">
|
||||
<span class="font-semibold block text-slate-800">TS <span class="text-[10px] text-slate-400 font-normal">(Tensile Strength)</span></span>
|
||||
</td>
|
||||
<td class="py-2.5 px-2 font-mono font-bold text-slate-700">527 MPa</td>
|
||||
<td class="py-2.5 px-3 text-right">
|
||||
<span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg> OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2.5 px-3">
|
||||
<span class="font-semibold block text-slate-800">El <span class="text-[10px] text-slate-400 font-normal">(Elongation)</span></span>
|
||||
</td>
|
||||
<td class="py-2.5 px-2 font-mono font-bold text-slate-700">21%</td>
|
||||
<td class="py-2.5 px-3 text-right">
|
||||
<span class="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg> OK
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Nota de Referência Rápida -->
|
||||
<div class="p-3 bg-slate-50/50 border-t border-slate-50 text-[10px] text-slate-400">
|
||||
* Limites de conformidade validados conforme parâmetros exigidos pela norma de teste <span class="font-semibold text-slate-600">ASTM-A572-50-T1</span>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Composição Química (Direita) -->
|
||||
<div class="col-span-7 flex flex-col">
|
||||
<h3 class="text-[10px] uppercase font-bold tracking-wider text-slate-400 mb-2.5 flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 bg-slate-400 rounded-full"></span>
|
||||
3. Composição Química (%)
|
||||
</h3>
|
||||
<div class="flex-grow border border-slate-100 rounded-xl overflow-hidden bg-white shadow-sm flex flex-col justify-between">
|
||||
<table class="w-full text-left border-collapse text-xs">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-100 text-[10px] text-slate-400 font-bold uppercase tracking-wider">
|
||||
<th class="py-2 px-3">Elem.</th>
|
||||
<th class="py-2 px-2">Norma de Referência</th>
|
||||
<th class="py-2 px-2">Valor Certificado</th>
|
||||
<th class="py-2 px-3 text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50 font-mono">
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">C <span class="font-normal text-slate-400 text-[10px]">(Carbono)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,09%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">Si <span class="font-normal text-slate-400 text-[10px]">(Silício)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,01%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">Mn <span class="font-normal text-slate-400 text-[10px]">(Manganês)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,98%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">P <span class="font-normal text-slate-400 text-[10px]">(Fósforo)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,016%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">S <span class="font-normal text-slate-400 text-[10px]">(Enxofre)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,004%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 px-3 font-sans font-semibold text-slate-800">Al <span class="font-normal text-slate-400 text-[10px]">(Alumínio)</span></td>
|
||||
<td class="py-2 px-2 text-slate-400 text-[10px]">ASTM-A572-50-T1</td>
|
||||
<td class="py-2 px-2 font-bold text-slate-700">0,028%</td>
|
||||
<td class="py-2 px-3 text-right">
|
||||
<span class="inline-flex items-center text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded">OK</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Seção 3: Equivalências Internacionais (Cards Compactos de Referência Rápida) -->
|
||||
<section class="mb-5">
|
||||
<h3 class="text-[10px] uppercase font-bold tracking-wider text-slate-400 mb-2.5 flex items-center gap-1.5">
|
||||
<span class="w-1.5 h-1.5 bg-slate-400 rounded-full"></span>
|
||||
4. Matriz de Equivalências Internacionais
|
||||
</h3>
|
||||
<div class="grid grid-cols-4 gap-3 text-center">
|
||||
<div class="bg-slate-50 border border-slate-100 rounded-lg p-2.5">
|
||||
<span class="block text-[8px] font-bold tracking-wider text-slate-400 uppercase">União Europeia (EN)</span>
|
||||
<span class="block text-xs font-black text-slate-700 mt-1">S355J2</span>
|
||||
</div>
|
||||
<div class="bg-slate-50 border border-slate-100 rounded-lg p-2.5">
|
||||
<span class="block text-[8px] font-bold tracking-wider text-slate-400 uppercase">Alemanha (DIN)</span>
|
||||
<span class="block text-xs font-black text-slate-700 mt-1">St52-3</span>
|
||||
</div>
|
||||
<div class="bg-slate-50 border border-slate-100 rounded-lg p-2.5">
|
||||
<span class="block text-[8px] font-bold tracking-wider text-slate-400 uppercase">Japão (JIS)</span>
|
||||
<span class="block text-xs font-black text-slate-700 mt-1">SS400</span>
|
||||
</div>
|
||||
<div class="bg-slate-50 border border-slate-100 rounded-lg p-2.5">
|
||||
<span class="block text-[8px] font-bold tracking-wider text-slate-400 uppercase">Brasil (NBR Equivalente)</span>
|
||||
<span class="block text-[11px] font-black text-slate-700 mt-1">A572 Grau 50</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Nota de Inteligência Artificial & Validação Técnica -->
|
||||
<section class="bg-indigo-50/40 border border-indigo-100/50 rounded-xl p-3 flex gap-3 items-center">
|
||||
<!-- Ícone Minimalista de IA -->
|
||||
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600 shrink-0">
|
||||
<svg class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 21l-.813-5.096L3 15l5.096-.813L9 9l.813 5.096L15 15l-5.096.813ZM19.071 4.929l-.707 1.9.707 1.9-1.9-.707-1.9.707.707-1.9-.707-1.9 1.9.707 1.9-.707ZM17 11l-.354.954.954.354-.954.354-.354.954-.354-.954-.954-.354.954-.354.354-.954Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-[10px] font-bold text-indigo-950 uppercase tracking-wide">Laudo Assistido por Inteligência Artificial</h4>
|
||||
<p class="text-[10px] text-slate-500 leading-normal mt-0.5">
|
||||
Os dados certificados deste lote foram analisados em tempo real contra as bibliotecas normativas globais de siderurgia. Nenhuma anomalia metalúrgica ou desvio químico foi encontrado para os requisitos do <span class="font-semibold text-slate-700">ASTM-A572-50-T1</span>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Rodapé (Footer) -->
|
||||
<footer class="border-t border-slate-100 pt-3 text-[10px] text-slate-400 flex justify-between items-center">
|
||||
<div class="flex items-center gap-4">
|
||||
<span><strong>ID Relatório:</strong> ST-999039/2022</span>
|
||||
<span>•</span>
|
||||
<span>SteelCheck Systems</span>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Placeholder para visual de Autenticidade -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-right text-[9px] text-slate-400 leading-tight">Para validar o certificado<br><span class="font-bold text-slate-500">Acesse via QR Code</span></span>
|
||||
<!-- QR Code Minimalista via SVG -->
|
||||
<svg class="w-7 h-7 text-slate-800" viewBox="0 0 100 100" fill="currentColor">
|
||||
<rect x="0" y="0" width="30" height="30" />
|
||||
<rect x="10" y="10" width="10" height="10" fill="white" />
|
||||
<rect x="70" y="0" width="30" height="30" />
|
||||
<rect x="80" y="10" width="10" height="10" fill="white" />
|
||||
<rect x="0" y="70" width="30" height="30" />
|
||||
<rect x="10" y="80" width="10" height="10" fill="white" />
|
||||
<rect x="40" y="40" width="20" height="20" />
|
||||
<rect x="70" y="70" width="10" height="10" />
|
||||
<rect x="80" y="80" width="20" height="20" />
|
||||
<rect x="40" y="10" width="10" height="20" />
|
||||
<rect x="10" y="40" width="20" height="10" />
|
||||
</svg>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -81,8 +81,9 @@ const reportSchema = {
|
||||
norm: { type: Type.STRING, description: "Valor exigido pela norma (ex: Mín: 350 MPa)." },
|
||||
certificate: { type: Type.STRING, description: "Valor encontrado no certificado." },
|
||||
status: { type: Type.STRING, enum: ["OK", "FALHA"], description: "Status da propriedade." },
|
||||
differencePercentage: { type: Type.STRING, description: "Calculated percentage difference compared to theoretical normative material (e.g., '+15%' or '-5%'). Only for mechanical properties." }
|
||||
},
|
||||
required: ["property", "norm", "certificate", "status"]
|
||||
required: ["property", "norm", "certificate", "status", "differencePercentage"]
|
||||
}
|
||||
},
|
||||
chemical: {
|
||||
@@ -152,7 +153,7 @@ Execute:
|
||||
1. **Extração de Dados (OCR):** Extraia todos os dados primários do certificado.
|
||||
2. **Identificação de Normas:** Identifique a(s) norma(s) que o certificado alega atender.
|
||||
3. **Análise de Conformidade:** Compare os resultados com os requisitos mínimos e máximos das normas. Determine status como "OK" ou "FALHA" para cada item e "CONFORME" ou "NÃO CONFORME" geral.
|
||||
4. **Análise de Superdesempenho:** Se "CONFORME", calcule o quanto excede os requisitos (ex: "18% acima do mínimo").
|
||||
4. **Propriedades Mecânicas (mechanical):** Tabela de propriedades extraídas (ex: Yield Strength, Tensile Strength, Alongamento). Para CADA propriedade, calcule o percentual de quanto o material analisado é superior (ex: "+15%") ou inferior (ex: "-5%") em resistência ao material normativo teórico, e preencha no campo "differencePercentage".
|
||||
5. **Análise de Equivalência:** Liste materiais equivalentes de outras normas (EN, DIN, JIS, NBR, etc.).
|
||||
6. **Grau de Confiança:** Forneça um % de confiança baseado na qualidade do documento.
|
||||
|
||||
@@ -164,7 +165,7 @@ Retorne APENAS o objeto JSON, sem formatação adicional, seguindo EXATAMENTE es
|
||||
},
|
||||
"compliance": {
|
||||
"status": "CONFORME ou NÃO CONFORME",
|
||||
"mechanical": [ { "property": "", "norm": "", "certificate": "", "status": "OK ou FALHA" } ],
|
||||
"mechanical": [ { "property": "", "norm": "", "certificate": "", "status": "OK ou FALHA", "differencePercentage": "+X% ou -X%" } ],
|
||||
"chemical": [ { "element": "", "norm": "", "certificate": "", "status": "OK ou FALHA" } ],
|
||||
"otherTests": [ { "test": "", "norm": "", "certificate": "", "status": "OK ou FALHA" } ]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user