Fix math logic for timeline
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
const puppeteer = require('puppeteer-core');
|
||||
const buildHtml = require('./template');
|
||||
|
||||
/**
|
||||
* Renders the violation document HTML via Puppeteer and returns a PDF buffer.
|
||||
* Uses the system Chromium installed in the Alpine image (no separate download).
|
||||
* @param {object} violation - Row from violations JOIN employees
|
||||
* @param {object} score - Row from active_cpas_scores
|
||||
* @returns {Buffer}
|
||||
*/
|
||||
async function generatePdf(violation, score) {
|
||||
const html = buildHtml(violation, score);
|
||||
|
||||
const browser = await puppeteer.launch({
|
||||
executablePath: process.env.PUPPETEER_EXECUTABLE_PATH || '/usr/bin/chromium-browser',
|
||||
args: [
|
||||
'--no-sandbox',
|
||||
'--disable-setuid-sandbox',
|
||||
'--disable-dev-shm-usage',
|
||||
'--disable-gpu',
|
||||
],
|
||||
headless: 'new',
|
||||
});
|
||||
|
||||
try {
|
||||
const page = await browser.newPage();
|
||||
await page.setContent(html, { waitUntil: 'networkidle0' });
|
||||
|
||||
const pdf = await page.pdf({
|
||||
format: 'Letter',
|
||||
printBackground: true,
|
||||
margin: {
|
||||
top: '0.35in',
|
||||
bottom: '0.35in',
|
||||
left: '0.4in',
|
||||
right: '0.4in',
|
||||
},
|
||||
displayHeaderFooter: false,
|
||||
});
|
||||
|
||||
return pdf;
|
||||
} finally {
|
||||
await browser.close();
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = generatePdf;
|
||||
@@ -0,0 +1,385 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
// Load logo from disk once at startup and convert to base64 data URI
|
||||
// In Docker: /app/client/dist/static/mpm-logo.png
|
||||
// In dev: ./client/public/static/mpm-logo.png (or dist after build)
|
||||
let LOGO_DATA_URI = '';
|
||||
const logoPaths = [
|
||||
path.join(__dirname, '..', 'client', 'dist', 'static', 'mpm-logo.png'),
|
||||
path.join(__dirname, '..', 'client', 'public', 'static', 'mpm-logo.png'),
|
||||
];
|
||||
for (const p of logoPaths) {
|
||||
try {
|
||||
const buf = fs.readFileSync(p);
|
||||
LOGO_DATA_URI = `data:image/png;base64,${buf.toString('base64')}`;
|
||||
console.log('[PDF] Logo loaded from', p);
|
||||
break;
|
||||
} catch (_) { /* try next path */ }
|
||||
}
|
||||
if (!LOGO_DATA_URI) console.warn('[PDF] Logo not found — PDF header will have no logo');
|
||||
|
||||
const TIERS = [
|
||||
{ min: 0, max: 4, label: 'Tier 0\u20131 \u2014 Elite Standing', color: '#16a34a', bg: '#f0fdf4' },
|
||||
{ min: 5, max: 9, label: 'Tier 1 \u2014 Realignment', color: '#854d0e', bg: '#fefce8' },
|
||||
{ min: 10, max: 14, label: 'Tier 2 \u2014 Administrative Lockdown', color: '#b45309', bg: '#fff7ed' },
|
||||
{ min: 15, max: 19, label: 'Tier 3 \u2014 Verification', color: '#c2410c', bg: '#fff7ed' },
|
||||
{ min: 20, max: 24, label: 'Tier 4 \u2014 Risk Mitigation', color: '#b91c1c', bg: '#fef2f2' },
|
||||
{ min: 25, max: 29, label: 'Tier 5 \u2014 Final Decision', color: '#991b1b', bg: '#fef2f2' },
|
||||
{ min: 30, max: 999, label: 'Tier 6 \u2014 Separation', color: '#ffffff', bg: '#7f1d1d' },
|
||||
];
|
||||
|
||||
function getTier(pts) {
|
||||
return TIERS.find(t => pts >= t.min && pts <= t.max) || TIERS[0];
|
||||
}
|
||||
|
||||
function fmt(d) {
|
||||
if (!d) return '\u2014';
|
||||
return new Date(d + 'T12:00:00').toLocaleDateString('en-US', {
|
||||
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
|
||||
timeZone: 'America/Chicago',
|
||||
});
|
||||
}
|
||||
|
||||
function fmtDT(d, t) { return t ? `${fmt(d)} at ${t}` : fmt(d); }
|
||||
|
||||
function buildHtml(v, score) {
|
||||
const priorPts = score.active_points || 0;
|
||||
const priorTier = getTier(priorPts);
|
||||
const newTotal = priorPts + v.points;
|
||||
const newTier = getTier(newTotal);
|
||||
const escalated = priorTier.label !== newTier.label;
|
||||
const genAt = new Date().toLocaleString('en-US', {
|
||||
timeZone: 'America/Chicago', dateStyle: 'full', timeStyle: 'short',
|
||||
});
|
||||
const docId = `CPAS-${v.id.toString().padStart(5, '0')}`;
|
||||
|
||||
// Acknowledgment: if acknowledged_by is set, show filled data instead of blank sig line
|
||||
const hasAck = !!v.acknowledged_by;
|
||||
const ackName = v.acknowledged_by || '';
|
||||
const ackDate = v.acknowledged_date ? fmt(v.acknowledged_date) : '';
|
||||
|
||||
const logoTag = LOGO_DATA_URI
|
||||
? `<img src="${LOGO_DATA_URI}" class="logo" />`
|
||||
: '';
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
color: #1a1a2e;
|
||||
background: #fff;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 60%, #16213e 100%);
|
||||
padding: 24px 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #d4af37;
|
||||
}
|
||||
.header-left { display: flex; align-items: center; gap: 16px; }
|
||||
.logo { height: 36px; }
|
||||
.header-title { font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }
|
||||
.header-sub { font-size: 11px; color: #94a3b8; margin-top: 3px; letter-spacing: 0.5px; text-transform: uppercase; }
|
||||
.header-right { text-align: right; }
|
||||
.doc-id { font-size: 13px; font-weight: 700; color: #d4af37; letter-spacing: 0.5px; }
|
||||
.doc-meta { font-size: 10px; color: #64748b; margin-top: 4px; }
|
||||
|
||||
.confidential-bar {
|
||||
background: #fef2f2; border-bottom: 1px solid #fecaca;
|
||||
padding: 7px 36px; font-size: 11px; font-weight: 700; color: #991b1b;
|
||||
letter-spacing: 0.8px; text-transform: uppercase; text-align: center;
|
||||
}
|
||||
|
||||
.body { padding: 28px 36px; }
|
||||
|
||||
.section { margin-bottom: 24px; }
|
||||
.section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #64748b; }
|
||||
.section-rule { flex: 1; height: 1px; background: #e2e8f0; }
|
||||
|
||||
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
|
||||
.field-grid.single { grid-template-columns: 1fr; }
|
||||
.field { padding: 0; }
|
||||
.field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 2px; }
|
||||
.field-value { font-size: 13px; color: #1e293b; font-weight: 500; }
|
||||
.field-value.prominent { font-size: 15px; font-weight: 700; color: #0f172a; }
|
||||
|
||||
.detail-box {
|
||||
background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #667eea;
|
||||
border-radius: 6px; padding: 14px 16px; margin-top: 12px; font-size: 12px; color: #374151; line-height: 1.6;
|
||||
}
|
||||
.detail-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-bottom: 6px; }
|
||||
|
||||
.score-card {
|
||||
display: flex; align-items: center; gap: 0; background: #f8fafc;
|
||||
border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; margin-top: 4px;
|
||||
}
|
||||
.score-cell { flex: 1; padding: 18px 16px; text-align: center; border-right: 1px solid #e2e8f0; }
|
||||
.score-cell:last-child { border-right: none; }
|
||||
.score-cell.operator { flex: 0 0 48px; font-size: 24px; font-weight: 200; color: #cbd5e1; }
|
||||
.score-num { font-size: 32px; font-weight: 800; line-height: 1; }
|
||||
.score-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; margin-top: 4px; }
|
||||
.tier-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; }
|
||||
|
||||
.points-pill {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
background: #fffbeb; border: 2px solid #d4af37; border-radius: 8px;
|
||||
padding: 12px 24px; margin-bottom: 16px;
|
||||
}
|
||||
.points-pill-num { font-size: 42px; font-weight: 900; color: #d4af37; line-height: 1; }
|
||||
.points-pill-label { font-size: 12px; color: #92400e; line-height: 1.4; }
|
||||
.points-pill-label strong { display: block; font-size: 14px; }
|
||||
|
||||
.escalation-alert {
|
||||
background: #fef9c3; border: 1.5px solid #eab308; border-radius: 8px;
|
||||
padding: 12px 16px; margin-top: 14px; font-size: 12px; color: #713f12;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
}
|
||||
.escalation-icon { font-size: 18px; }
|
||||
|
||||
.tier-table { width: 100%; border-collapse: collapse; }
|
||||
.tier-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #94a3b8; text-align: left; padding: 6px 12px; border-bottom: 2px solid #e2e8f0; }
|
||||
.tier-table td { padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #f1f5f9; }
|
||||
.tier-table tr.current-tier td { background: #fffbeb; font-weight: 700; }
|
||||
.tier-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
|
||||
|
||||
.notice {
|
||||
background: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 0 6px 6px 0;
|
||||
padding: 12px 16px; font-size: 11.5px; color: #1e40af; line-height: 1.6;
|
||||
}
|
||||
|
||||
.sig-intro { font-size: 11.5px; color: #475569; line-height: 1.7; margin-bottom: 28px; }
|
||||
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
|
||||
.sig-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; }
|
||||
.sig-line-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #64748b; }
|
||||
.sig-date-line { border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; }
|
||||
|
||||
.sig-filled { font-size: 14px; font-weight: 600; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; min-height: 52px; display: flex; align-items: flex-end; }
|
||||
.sig-date-filled { font-size: 13px; color: #1e293b; padding-bottom: 6px; border-bottom: 1.5px solid #334155; margin-bottom: 8px; margin-top: 20px; min-height: 36px; display: flex; align-items: flex-end; }
|
||||
.ack-badge { display: inline-block; background: #dcfce7; color: #166534; border: 1px solid #86efac; border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-left: 10px; }
|
||||
|
||||
.footer-bar {
|
||||
margin-top: 32px; padding: 10px 0 0; border-top: 1px solid #e2e8f0;
|
||||
font-size: 10px; color: #94a3b8; display: flex; justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
${logoTag}
|
||||
<div>
|
||||
<div class="header-title">CPAS Violation Record</div>
|
||||
<div class="header-sub">Comprehensive Professional Accountability System</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="doc-id">${docId}</div>
|
||||
<div class="doc-meta">Generated ${genAt}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="confidential-bar">\u26D1 Confidential \u2014 Authorized HR & Management Use Only</div>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- Employee -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Employee Information</div>
|
||||
<div class="section-rule"></div>
|
||||
</div>
|
||||
<div class="field-grid">
|
||||
<div class="field">
|
||||
<div class="field-label">Employee Name</div>
|
||||
<div class="field-value prominent">${v.employee_name}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Department</div>
|
||||
<div class="field-value">${v.department || '\u2014'}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Supervisor</div>
|
||||
<div class="field-value">${v.supervisor || '\u2014'}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Witness / Documenting Officer</div>
|
||||
<div class="field-value">${v.witness_name || '\u2014'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Violation -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Violation Details</div>
|
||||
<div class="section-rule"></div>
|
||||
</div>
|
||||
<div class="field-grid">
|
||||
<div class="field">
|
||||
<div class="field-label">Violation</div>
|
||||
<div class="field-value prominent">${v.violation_name}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Category</div>
|
||||
<div class="field-value">${v.category}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Incident Date / Time</div>
|
||||
<div class="field-value">${fmtDT(v.incident_date, v.incident_time)}</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="field-label">Submitted By</div>
|
||||
<div class="field-value">${v.submitted_by || 'System'}</div>
|
||||
</div>
|
||||
${v.location ? `
|
||||
<div class="field" style="grid-column: 1 / -1;">
|
||||
<div class="field-label">Location / Context</div>
|
||||
<div class="field-value">${v.location}</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
${v.details ? `
|
||||
<div class="detail-box">
|
||||
<div class="detail-box-label">Incident Notes</div>
|
||||
${v.details}
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Points -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">CPAS Point Assessment</div>
|
||||
<div class="section-rule"></div>
|
||||
</div>
|
||||
|
||||
<div class="points-pill">
|
||||
<div class="points-pill-num">${v.points}</div>
|
||||
<div class="points-pill-label">
|
||||
<strong>Points Assessed</strong>
|
||||
This violation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="score-card">
|
||||
<div class="score-cell">
|
||||
<div class="score-num" style="color:${priorTier.color};">${priorPts}</div>
|
||||
<div class="score-label">Prior Active Points</div>
|
||||
<span class="tier-badge" style="background:${priorTier.bg}; color:${priorTier.color};">
|
||||
${priorTier.label}
|
||||
</span>
|
||||
</div>
|
||||
<div class="score-cell operator">+</div>
|
||||
<div class="score-cell">
|
||||
<div class="score-num" style="color:#d4af37;">${v.points}</div>
|
||||
<div class="score-label">This Violation</div>
|
||||
</div>
|
||||
<div class="score-cell operator">=</div>
|
||||
<div class="score-cell">
|
||||
<div class="score-num" style="color:${newTier.color};">${newTotal}</div>
|
||||
<div class="score-label">New Active Total</div>
|
||||
<span class="tier-badge" style="background:${newTier.bg}; color:${newTier.color};">
|
||||
${newTier.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${escalated ? `
|
||||
<div class="escalation-alert">
|
||||
<span class="escalation-icon">\u26A0</span>
|
||||
<div>
|
||||
<strong>Tier Escalation:</strong>
|
||||
This violation advances the employee from <strong>${priorTier.label}</strong>
|
||||
to <strong>${newTier.label}</strong>.
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Tier Reference -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">CPAS Tier Reference</div>
|
||||
<div class="section-rule"></div>
|
||||
</div>
|
||||
<table class="tier-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Points</th>
|
||||
<th>Tier & Standing</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${TIERS.map(t => {
|
||||
const active = newTotal >= t.min && newTotal <= t.max;
|
||||
const range = t.min === 30 ? '30+' : `${t.min}\u2013${t.max}`;
|
||||
return `<tr class="${active ? 'current-tier' : ''}">
|
||||
<td>${active ? '\u25B6 ' : ''}${range}</td>
|
||||
<td>
|
||||
<span class="tier-dot" style="background:${t.color === '#ffffff' ? t.bg : t.color};"></span>
|
||||
${t.label}
|
||||
${active ? '<strong> \u2190 Current</strong>' : ''}
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Notice -->
|
||||
<div class="notice" style="margin-bottom:24px;">
|
||||
<strong>Employee Notice:</strong> CPAS points remain active for a rolling 90-day period from the date of each incident.
|
||||
Accumulation of points may result in tier escalation and associated consequences as outlined in the Employee Handbook.
|
||||
The employee may submit a written response within 5 business days of receiving this document.
|
||||
</div>
|
||||
|
||||
<!-- Signatures -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Acknowledgement & Signatures${hasAck ? '<span class="ack-badge">Acknowledged</span>' : ''}</div>
|
||||
<div class="section-rule"></div>
|
||||
</div>
|
||||
<p class="sig-intro">
|
||||
By signing below, the employee acknowledges receipt of this violation record.
|
||||
Acknowledgement does not imply agreement with the violation as documented.
|
||||
</p>
|
||||
<div class="sig-grid">
|
||||
<div class="sig-block">
|
||||
${hasAck
|
||||
? `<div class="sig-filled">${ackName}</div>`
|
||||
: '<div class="sig-line"></div>'}
|
||||
<div class="sig-line-label">Employee Signature</div>
|
||||
${hasAck && ackDate
|
||||
? `<div class="sig-date-filled">${ackDate}</div>`
|
||||
: '<div class="sig-date-line"></div>'}
|
||||
<div class="sig-line-label">Date</div>
|
||||
</div>
|
||||
<div class="sig-block">
|
||||
<div class="sig-line"></div>
|
||||
<div class="sig-line-label">Supervisor / Documenting Officer Signature</div>
|
||||
<div class="sig-date-line"></div>
|
||||
<div class="sig-line-label">Date</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bar">
|
||||
<span>${docId} \u00B7 ${v.employee_name} \u00B7 Incident: ${v.incident_date}</span>
|
||||
<span>Message Point Media \u2014 Internal Use Only</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
||||
module.exports = buildHtml;
|
||||
Reference in New Issue
Block a user