Deploy Inicial do SteelCheck com Docker Build Automatizado
This commit is contained in:
@@ -9,12 +9,12 @@ const statusClass = (status: 'OK' | 'FALHA' | 'CONFORME' | 'NÃO CONFORME') => {
|
|||||||
switch (status) {
|
switch (status) {
|
||||||
case 'OK':
|
case 'OK':
|
||||||
case 'CONFORME':
|
case 'CONFORME':
|
||||||
return 'text-emerald-600 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800';
|
return 'text-emerald-700 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-400';
|
||||||
case 'FALHA':
|
case 'FALHA':
|
||||||
case 'NÃO CONFORME':
|
case 'NÃO CONFORME':
|
||||||
return 'text-red-600 bg-red-50 dark:bg-red-900/30 dark:text-red-400 border border-red-200 dark:border-red-800';
|
return 'text-rose-700 bg-rose-50 dark:bg-rose-900/30 dark:text-rose-400';
|
||||||
default:
|
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';
|
return 'text-slate-600 bg-slate-50 dark:bg-slate-800/50 dark:text-slate-400';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -123,15 +123,15 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
|
|||||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||||
2. Propriedades Mecânicas
|
2. Propriedades Mecânicas
|
||||||
</h3>
|
</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="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-between">
|
||||||
<div className="overflow-hidden">
|
<div className="overflow-hidden">
|
||||||
<table className="w-full table-fixed text-left border-collapse text-xs">
|
<table className="w-full table-fixed text-left border-collapse text-xs">
|
||||||
<thead>
|
<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">
|
<tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
|
||||||
<th className="py-2.5 px-2 w-[35%] truncate">Propriedade</th>
|
<th className="py-3 px-3 w-[35%] truncate">Propriedade</th>
|
||||||
<th className="py-2.5 px-1 w-[25%] truncate">Certif.</th>
|
<th className="py-3 px-1 w-[25%] truncate">Certificado</th>
|
||||||
<th className="py-2.5 px-1 w-[15%] text-center truncate">% Rel.</th>
|
<th className="py-3 px-1 w-[15%] text-center truncate">% Rel.</th>
|
||||||
<th className="py-2.5 px-1 w-[25%] text-right truncate">Status</th>
|
<th className="py-3 px-3 w-[25%] text-right truncate">Status</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
|
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50">
|
||||||
@@ -140,17 +140,17 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
|
|||||||
const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
|
const diffColor = isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';
|
||||||
return (
|
return (
|
||||||
<tr key={i}>
|
<tr key={i}>
|
||||||
<td className="py-2.5 px-2 truncate">
|
<td className="py-3 px-3 truncate">
|
||||||
<span className="font-medium text-[10px] block text-slate-800 dark:text-slate-200" title={item.property}>{item.property}</span>
|
<span className="font-semibold text-[11px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span>
|
||||||
</td>
|
</td>
|
||||||
<td className="py-2.5 px-1 font-mono font-bold text-[10px] text-slate-700 dark:text-slate-300 truncate" title={item.certificate}>{item.certificate}</td>
|
<td className="py-3 px-1 font-mono font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
|
||||||
<td className="py-2.5 px-1 text-center truncate">
|
<td className="py-3 px-1 text-center truncate">
|
||||||
{item.differencePercentage ? (
|
{item.differencePercentage ? (
|
||||||
<span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
|
<span className={`text-[10px] font-bold ${diffColor}`}>{item.differencePercentage}</span>
|
||||||
) : <span className="text-slate-300 dark:text-slate-600">-</span>}
|
) : <span className="text-slate-300 dark:text-slate-600">-</span>}
|
||||||
</td>
|
</td>
|
||||||
<td className="py-2.5 px-1 text-right">
|
<td className="py-3 px-3 text-right">
|
||||||
<span className={`inline-flex items-center gap-1 text-[9px] font-bold px-1.5 py-0.5 rounded ${statusClass(item.status)}`}>
|
<span className={`inline-flex items-center gap-1 text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
|
||||||
{statusIcon(item.status)} {item.status}
|
{statusIcon(item.status)} {item.status}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
@@ -177,25 +177,25 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
|
|||||||
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
<span className="w-1.5 h-1.5 bg-slate-400 dark:bg-slate-500 rounded-full"></span>
|
||||||
3. Composição Química (%)
|
3. Composição Química (%)
|
||||||
</h3>
|
</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="flex-grow border border-slate-100 dark:border-slate-800/60 rounded-2xl overflow-hidden bg-white dark:bg-slate-900 shadow-[0_2px_10px_-3px_rgba(6,81,237,0.05)] flex flex-col justify-start">
|
||||||
<div className="overflow-hidden">
|
<div className="overflow-hidden">
|
||||||
<table className="w-full table-fixed text-left border-collapse text-xs">
|
<table className="w-full table-fixed text-left border-collapse text-xs">
|
||||||
<thead>
|
<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">
|
<tr className="bg-slate-50/80 dark:bg-slate-800/40 border-b border-slate-50 dark:border-slate-800/60 text-[9px] text-slate-500 dark:text-slate-400 font-bold uppercase tracking-wider">
|
||||||
<th className="py-2 px-2 w-[15%] truncate">Elem.</th>
|
<th className="py-3 px-3 w-[15%] truncate">Elem.</th>
|
||||||
<th className="py-2 px-1 w-[40%] truncate">Norma Referência</th>
|
<th className="py-3 px-1 w-[40%] truncate">Norma de Referência</th>
|
||||||
<th className="py-2 px-1 w-[25%] truncate">Certificado</th>
|
<th className="py-3 px-1 w-[25%] truncate">Valor Certificado</th>
|
||||||
<th className="py-2 px-1 w-[20%] text-right truncate">Status</th>
|
<th className="py-3 px-3 w-[20%] text-right truncate">Status</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
|
<tbody className="divide-y divide-slate-50 dark:divide-slate-800/50 font-mono">
|
||||||
{compliance.chemical.map((item, i) => (
|
{compliance.chemical.map((item, i) => (
|
||||||
<tr key={i}>
|
<tr key={i}>
|
||||||
<td className="py-2 px-2 font-sans font-medium text-[10px] text-slate-800 dark:text-slate-200 truncate" title={item.element}>{item.element}</td>
|
<td className="py-3 px-3 font-sans font-semibold text-[11px] text-slate-700 dark:text-slate-300 truncate" title={item.element}>{item.element}</td>
|
||||||
<td className="py-2 px-1 text-slate-400 dark:text-slate-500 text-[9px] leading-tight truncate" title={item.norm}>{item.norm}</td>
|
<td className="py-3 px-1 text-slate-500 dark:text-slate-400 text-[10px] leading-tight truncate" title={item.norm}>{item.norm}</td>
|
||||||
<td className="py-2 px-1 font-bold text-[10px] text-slate-700 dark:text-slate-300 truncate" title={item.certificate}>{item.certificate}</td>
|
<td className="py-3 px-1 font-bold text-[11px] text-slate-900 dark:text-slate-100 truncate" title={item.certificate}>{item.certificate}</td>
|
||||||
<td className="py-2 px-1 text-right">
|
<td className="py-3 px-3 text-right">
|
||||||
<span className={`inline-flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded ${statusClass(item.status)}`}>
|
<span className={`inline-flex items-center text-[10px] font-bold px-2 py-1 rounded-md ${statusClass(item.status)}`}>
|
||||||
{item.status}
|
{item.status}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -16,6 +16,11 @@ export const exportAsPdf = async (elementId: string, fileName: string, action: '
|
|||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
const isDark = document.documentElement.classList.contains('dark');
|
||||||
|
if (isDark) {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
|
||||||
const pdf = new jsPDF({
|
const pdf = new jsPDF({
|
||||||
orientation: 'portrait',
|
orientation: 'portrait',
|
||||||
unit: 'mm',
|
unit: 'mm',
|
||||||
@@ -44,6 +49,10 @@ export const exportAsPdf = async (elementId: string, fileName: string, action: '
|
|||||||
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
|
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isDark) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
}
|
||||||
|
|
||||||
if (action === 'download') {
|
if (action === 'download') {
|
||||||
pdf.save(`${fileName}.pdf`);
|
pdf.save(`${fileName}.pdf`);
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Reference in New Issue
Block a user