189 lines
13 KiB
HTML
189 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Project Milestone Overdue Notification</title>
|
|
<!--[if mso]>
|
|
<style type="text/css">
|
|
body, table, td { font-family: Arial, Helvetica, sans-serif !important; }
|
|
</style>
|
|
<![endif]-->
|
|
</head>
|
|
<body style="margin: 0; padding: 0; background-color: #f1f5f9; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: #1e293b; line-height: 1.6;">
|
|
|
|
<!-- Wrapper Table -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f1f5f9; padding: 32px 16px;">
|
|
<tr>
|
|
<td align="center">
|
|
<!-- Main Container Card (600px) -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0;">
|
|
|
|
<!-- Header Bar -->
|
|
<tr>
|
|
<td style="background-color: #0f172a; padding: 24px 32px; border-bottom: 3px solid #e11d48;">
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
<tr>
|
|
<td>
|
|
<div style="font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px;">
|
|
Post-Fund Management Platform (PFM)
|
|
</div>
|
|
<div style="font-size: 18px; font-weight: 700; color: #ffffff; letter-spacing: -0.3px;">
|
|
Portfolio Performance & Monitoring
|
|
</div>
|
|
</td>
|
|
<td align="right" style="vertical-align: middle;">
|
|
<span style="display: inline-block; background-color: rgba(225, 29, 72, 0.2); border: 1px solid rgba(225, 29, 72, 0.5); color: #fda4af; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">
|
|
Action Required
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Alert Banner -->
|
|
<tr>
|
|
<td style="background-color: #fff1f2; border-bottom: 1px solid #ffe4e6; padding: 16px 32px;">
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
|
|
<tr>
|
|
<td style="width: 28px; vertical-align: top; padding-right: 12px;">
|
|
<div style="width: 24px; height: 24px; background-color: #e11d48; border-radius: 50%; color: #ffffff; text-align: center; line-height: 24px; font-size: 13px; font-weight: bold;">
|
|
!
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div style="font-size: 14px; font-weight: 700; color: #9f1239; margin-bottom: 2px;">
|
|
Overdue Milestone Notice: [TotalLateMilestones] Milestone(s) Exceeded Due Date
|
|
</div>
|
|
<div style="font-size: 12px; color: #be123c;">
|
|
Automated daily sweep flagged scheduled deliverables requiring evidence submission or status updates.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content Body -->
|
|
<tr>
|
|
<td style="padding: 32px;">
|
|
|
|
<!-- Salutation -->
|
|
<p style="margin: 0 0 16px 0; font-size: 15px; color: #334155;">
|
|
Dear <strong>[OrganisationName]</strong> Team,
|
|
</p>
|
|
|
|
<!-- Message -->
|
|
<p style="margin: 0 0 24px 0; font-size: 14px; color: #475569; line-height: 1.6;">
|
|
During our automated lifecycle monitoring sweep, our platform identified one or more contractual milestones for
|
|
<strong style="color: #0f172a;">[ProjectName]</strong> that have passed their agreed target completion deadlines without formal evidence approval.
|
|
</p>
|
|
|
|
<!-- Project Overview Box -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 24px; overflow: hidden;">
|
|
<tr>
|
|
<td colspan="2" style="background-color: #f1f5f9; padding: 10px 16px; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.5px;">
|
|
Project Summary
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #64748b; width: 40%; border-bottom: 1px solid #f1f5f9;">Project Title</td>
|
|
<td style="padding: 12px 16px; font-size: 13px; font-weight: 600; color: #0f172a; border-bottom: 1px solid #f1f5f9;">[ProjectName]</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #64748b; border-bottom: 1px solid #f1f5f9;">Implementation Window</td>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #334155; border-bottom: 1px solid #f1f5f9;">[ProjectStartDate] — [ProjectEndDate]</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #64748b; border-bottom: 1px solid #f1f5f9;">Overdue Deliverables</td>
|
|
<td style="padding: 12px 16px; font-size: 13px; font-weight: 700; color: #e11d48; border-bottom: 1px solid #f1f5f9;">
|
|
<span style="background-color: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 4px;">[TotalLateMilestones] Milestone(s)</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #64748b;">Most Overdue Milestone</td>
|
|
<td style="padding: 12px 16px; font-size: 13px; color: #334155;">
|
|
<strong>[MostLateMilestoneName]</strong> <span style="color: #64748b; font-size: 12px;">(Due: [MostLateMilestoneDueDate])</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Detailed Milestones Table Header -->
|
|
<div style="font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px;">
|
|
Milestone Breakdown
|
|
</div>
|
|
|
|
<!-- Milestones Table -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-bottom: 24px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden;">
|
|
<thead>
|
|
<tr style="background-color: #f8fafc; text-align: left; border-bottom: 2px solid #e2e8f0;">
|
|
<th style="padding: 10px 14px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase;">Milestone</th>
|
|
<th style="padding: 10px 14px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase;">Due Date</th>
|
|
<th style="padding: 10px 14px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase;">Delay</th>
|
|
<th style="padding: 10px 14px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
[LateMilestonesTable]
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Governance & SLA Callout -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8fafc; border-left: 4px solid #0284c7; padding: 14px 18px; border-radius: 4px; margin-bottom: 28px;">
|
|
<tr>
|
|
<td>
|
|
<div style="font-size: 12px; font-weight: 700; color: #0369a1; text-transform: uppercase; margin-bottom: 4px;">
|
|
Disbursement & Governance Policy (BR-003 / BR-004)
|
|
</div>
|
|
<div style="font-size: 12px; color: #475569; line-height: 1.5;">
|
|
Under PFM governance regulations, tranches and disbursements are strictly gated by verified milestone deliverables. Overdue milestones may trigger project risk escalations and freeze scheduled payment releases.
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- CTA Button -->
|
|
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-bottom: 28px;">
|
|
<tr>
|
|
<td align="center">
|
|
<a href="[PortalUrl]" target="_blank" style="display: inline-block; background-color: #0f172a; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 32px; border-radius: 6px; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);">
|
|
Open PFM Portal & Submit Evidence →
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
|
|
If you have already submitted the evidence for these deliverables or have an active change request under review with your Programme Manager, you may disregard this notice.
|
|
</p>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td style="background-color: #f8fafc; padding: 24px 32px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #94a3b8; text-align: center;">
|
|
<p style="margin: 0 0 8px 0; color: #64748b; font-weight: 600;">
|
|
Post-Fund Management (PFM) Platform • Automated Lifecycle & SLA Daemon
|
|
</p>
|
|
<p style="margin: 0 0 12px 0; line-height: 1.4;">
|
|
This is an automated contractual notification sent in accordance with your funding agreement SLA.<br>
|
|
Please do not reply directly to this email. For support, please contact your designated Programme Officer.
|
|
</p>
|
|
<p style="margin: 0; font-size: 11px; color: #cbd5e1;">
|
|
© [Year] PostFundManagement Platform. All rights reserved.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|
|
|