admtracksteel/SteelCheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: compact PDF report tables for mechanical and chemical properties

Browse Source
This commit is contained in:
admtracksteel
2026-06-23 12:16:54 +00:00
parent b95c045aec
commit b0837ca893
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ReportDisplay.tsx
+22 -22
View File
@@ -115,11 +115,11 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
</section> </section>
{/* Seções 2 e 3: Propriedades (Lado a Lado no Desktop) */} {/* Seções 2 e 3: Propriedades (Lado a Lado no Desktop) */}
<section className="grid grid-cols-1 md:grid-cols-12 gap-3 mb-4 flex-grow"> <section className="grid grid-cols-1 md:grid-cols-12 gap-2 mb-3 flex-grow">
{/* Propriedades Mecânicas (Esquerda) */} {/* Propriedades Mecânicas (Esquerda) */}
<div className="col-span-1 md:col-span-6 flex flex-col"> <div className="col-span-1 md:col-span-6 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"> <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-1.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> <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>
@@ -128,10 +128,10 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
<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/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"> <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-1 px-1.5 w-[35%]">Propriedade</th> <th className="py-0.5 px-1 w-[35%]">Propriedade</th>
<th className="py-1 px-1 w-[25%]">Certificado</th> <th className="py-0.5 px-1 w-[25%]">Certificado</th>
<th className="py-1 px-1 w-[15%] text-center">% Rel.</th> <th className="py-0.5 px-1 w-[15%] text-center">% Rel.</th>
<th className="py-1 px-1 w-[25%] text-right">Status</th> <th className="py-0.5 px-1 w-[25%] text-right">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-1 px-1.5"> <td className="py-0.5 px-1.5">
<span className="font-semibold text-[10px] block text-slate-700 dark:text-slate-300" title={item.property}>{item.property}</span> <span className="font-semibold text-[10px] block text-slate-700 dark:text-slate-300 leading-tight" title={item.property}>{item.property}</span>
</td> </td>
<td className="py-1 px-1 font-mono font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td> <td className="py-0.5 px-1 font-mono font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words leading-tight" title={item.certificate}>{item.certificate}</td>
<td className="py-1 px-1 text-center"> <td className="py-0.5 px-1 text-center leading-tight">
{item.differencePercentage ? ( {item.differencePercentage ? (
<span className={`text-[9px] font-bold ${diffColor}`}>{item.differencePercentage}</span> <span className={`text-[9px] 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-1 px-1 text-right"> <td className="py-0.5 px-1 text-right">
<span className={`inline-flex items-center gap-1 text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}> <span className={`inline-flex items-center gap-1 text-[8px] font-bold px-1 py-0.5 rounded-md ${statusClass(item.status)}`}>
{statusIcon(item.status)} {item.status} {statusIcon(item.status)} {item.status}
</span> </span>
</td> </td>
@@ -173,7 +173,7 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
{/* Composição Química (Direita) */} {/* Composição Química (Direita) */}
<div className="col-span-1 md:col-span-6 flex flex-col"> <div className="col-span-1 md:col-span-6 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"> <h3 className="text-[10px] uppercase font-bold tracking-wider text-slate-400 dark:text-slate-500 mb-1.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> <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>
@@ -182,20 +182,20 @@ export const ReportDisplay: React.FC<ReportDisplayProps> = ({ report }) => {
<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/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"> <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-1 px-1.5 w-[15%]">Elem.</th> <th className="py-0.5 px-1.5 w-[15%]">Elem.</th>
<th className="py-1 px-1 w-[40%]">Norma de Referência</th> <th className="py-0.5 px-1 w-[40%]">Norma de Referência</th>
<th className="py-1 px-1 w-[25%]">Valor Certificado</th> <th className="py-0.5 px-1 w-[25%]">Valor Certificado</th>
<th className="py-1 px-1.5 w-[20%] text-right">Status</th> <th className="py-0.5 px-1.5 w-[20%] text-right">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-1 px-1.5 font-sans font-semibold text-[10px] text-slate-700 dark:text-slate-300" title={item.element}>{item.element}</td> <td className="py-0.5 px-1.5 font-sans font-semibold text-[10px] text-slate-700 dark:text-slate-300 leading-tight" title={item.element}>{item.element}</td>
<td className="py-1 px-1 text-slate-500 dark:text-slate-400 text-[9px] leading-tight break-words" title={item.norm}>{item.norm}</td> <td className="py-0.5 px-1 text-slate-500 dark:text-slate-400 text-[9px] leading-tight break-words" title={item.norm}>{item.norm}</td>
<td className="py-1 px-1 font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words" title={item.certificate}>{item.certificate}</td> <td className="py-0.5 px-1 font-bold text-[10px] text-slate-900 dark:text-slate-100 break-words leading-tight" title={item.certificate}>{item.certificate}</td>
<td className="py-1 px-1.5 text-right"> <td className="py-0.5 px-1.5 text-right">
<span className={`inline-flex items-center text-[9px] font-bold px-1.5 py-0.5 rounded-md ${statusClass(item.status)}`}> <span className={`inline-flex items-center text-[8px] font-bold px-1 py-0.5 rounded-md ${statusClass(item.status)}`}>
{item.status} {item.status}
</span> </span>
</td> </td>