539 lines
14 KiB
Markdown
539 lines
14 KiB
Markdown
# CIM Review PDF Template
|
|
## HTML Template for Professional CIM Review Reports
|
|
|
|
### 🎯 Overview
|
|
|
|
This document contains the HTML template used by the PDF Generation Service to create professional CIM Review reports. The template includes comprehensive styling and structure for generating high-quality PDF documents.
|
|
|
|
---
|
|
|
|
## 📄 HTML Template
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CIM Review Report</title>
|
|
<style>
|
|
:root {
|
|
--page-margin: 0.75in;
|
|
--radius: 10px;
|
|
--shadow: 0 12px 30px -10px rgba(0,0,0,0.08);
|
|
--color-bg: #ffffff;
|
|
--color-muted: #f5f7fa;
|
|
--color-text: #1f2937;
|
|
--color-heading: #111827;
|
|
--color-border: #dfe3ea;
|
|
--color-primary: #5f6cff;
|
|
--color-primary-dark: #4a52d1;
|
|
--color-success-bg: #e6f4ea;
|
|
--color-success-border: #38a169;
|
|
--color-highlight-bg: #fff8ed;
|
|
--color-highlight-border: #f29f3f;
|
|
--color-summary-bg: #eef7fe;
|
|
--color-summary-border: #3182ce;
|
|
--font-stack: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
@page {
|
|
margin: var(--page-margin);
|
|
size: A4;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-stack);
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
line-height: 1.45;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.container {
|
|
max-width: 940px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
padding: 24px 20px;
|
|
background: #f9fbfc;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--color-border);
|
|
margin-bottom: 28px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-left {
|
|
flex: 1 1 300px;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 24pt;
|
|
font-weight: 700;
|
|
color: var(--color-heading);
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.title:after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 4px;
|
|
width: 60px;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 4px 0 0 0;
|
|
font-size: 10pt;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.meta {
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
color: #6b7280;
|
|
min-width: 180px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 28px;
|
|
padding: 22px 24px;
|
|
background: #ffffff;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow);
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.section + .section {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 14px 0;
|
|
font-size: 18pt;
|
|
font-weight: 600;
|
|
color: var(--color-heading);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
h3 {
|
|
margin: 16px 0 8px 0;
|
|
font-size: 13pt;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.field-label {
|
|
flex: 0 0 180px;
|
|
font-size: 9pt;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: #4b5563;
|
|
margin: 0;
|
|
}
|
|
|
|
.field-value {
|
|
flex: 1 1 220px;
|
|
font-size: 11pt;
|
|
color: var(--color-text);
|
|
margin: 0;
|
|
}
|
|
|
|
.financial-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 16px 0;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.financial-table th,
|
|
.financial-table td {
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.financial-table thead th {
|
|
background: var(--color-primary);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
font-size: 9pt;
|
|
border-bottom: 2px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.financial-table tbody tr {
|
|
border-bottom: 1px solid #eceef1;
|
|
}
|
|
|
|
.financial-table tbody tr:nth-child(odd) td {
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.financial-table td {
|
|
background: #fff;
|
|
color: var(--color-text);
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.financial-table tbody tr:hover td {
|
|
background: #f1f5fa;
|
|
}
|
|
|
|
.summary-box,
|
|
.highlight-box,
|
|
.success-box {
|
|
border-radius: 8px;
|
|
padding: 16px 18px;
|
|
margin: 18px 0;
|
|
position: relative;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
.summary-box {
|
|
background: var(--color-summary-bg);
|
|
border: 1px solid var(--color-summary-border);
|
|
}
|
|
|
|
.highlight-box {
|
|
background: var(--color-highlight-bg);
|
|
border: 1px solid var(--color-highlight-border);
|
|
}
|
|
|
|
.success-box {
|
|
background: var(--color-success-bg);
|
|
border: 1px solid var(--color-success-border);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 18px 20px;
|
|
font-size: 9pt;
|
|
color: #6b7280;
|
|
border-top: 1px solid var(--color-border);
|
|
margin-top: 30px;
|
|
background: #f9fbfc;
|
|
border-radius: var(--radius);
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer .left,
|
|
.footer .right {
|
|
flex: 1 1 200px;
|
|
}
|
|
|
|
.footer .center {
|
|
flex: 0 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.small {
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
margin: 16px 0;
|
|
border: none;
|
|
}
|
|
|
|
/* Utility */
|
|
.inline-block { display: inline-block; }
|
|
.muted { color: #6b7280; }
|
|
|
|
/* Page numbering for PDF (supported in many engines including Puppeteer) */
|
|
.page-footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
font-size: 8pt;
|
|
text-align: center;
|
|
padding: 8px 0;
|
|
color: #9ca3af;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<h1 class="title">CIM Review Report</h1>
|
|
<p class="subtitle">Professional Investment Analysis</p>
|
|
</div>
|
|
<div class="meta">
|
|
<div>Generated on ${new Date().toLocaleDateString()}</div>
|
|
<div style="margin-top:4px;">at ${new Date().toLocaleTimeString()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Content Sections -->
|
|
<!-- Example of how your loop would insert sections: -->
|
|
<!--
|
|
<div class="section">
|
|
<h2><span class="section-icon">📊</span>Deal Overview</h2>
|
|
...fields / tables...
|
|
</div>
|
|
-->
|
|
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<div class="left">
|
|
<strong>BPCP CIM Document Processor</strong> | Professional Investment Analysis | Confidential
|
|
</div>
|
|
<div class="center small">
|
|
Generated on ${new Date().toLocaleDateString()} at ${new Date().toLocaleTimeString()}
|
|
</div>
|
|
<div class="right" style="text-align:right;">
|
|
Page <span class="page-number"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Optional script to inject page numbers if using Puppeteer -->
|
|
<script>
|
|
// Puppeteer can replace this with its own page numbering; if not, simple fallback:
|
|
document.querySelectorAll('.page-number').forEach(el => {
|
|
// placeholder; leave blank or inject via PDF generation tooling
|
|
el.textContent = '';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 CSS Styling Features
|
|
|
|
### **Design System**
|
|
- **CSS Variables**: Centralized design tokens for consistency
|
|
- **Modern Color Palette**: Professional grays, blues, and accent colors
|
|
- **Typography**: System font stack for optimal rendering
|
|
- **Spacing**: Consistent spacing using design tokens
|
|
|
|
### **Typography**
|
|
- **Font Stack**: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
|
|
- **Line Height**: 1.45 for optimal readability
|
|
- **Font Sizes**: 8.5pt to 24pt range for hierarchy
|
|
- **Color Scheme**: Professional grays and modern blue accent
|
|
|
|
### **Layout**
|
|
- **Page Size**: A4 with 0.75in margins
|
|
- **Container**: Max-width 940px for optimal reading
|
|
- **Flexbox Layout**: Modern responsive design
|
|
- **Section Spacing**: 28px between sections with 4px gaps
|
|
|
|
### **Visual Elements**
|
|
|
|
#### **Headers**
|
|
- **Main Title**: 24pt with underline accent in primary color
|
|
- **Section Headers**: 18pt with icons and flexbox layout
|
|
- **Subsection Headers**: 13pt for organization
|
|
|
|
#### **Content Sections**
|
|
- **Background**: White with subtle borders and shadows
|
|
- **Border Radius**: 10px for modern appearance
|
|
- **Box Shadows**: Sophisticated shadow with 12px blur
|
|
- **Padding**: 22px horizontal, 24px vertical for comfortable reading
|
|
- **Page Break**: Avoid page breaks within sections
|
|
|
|
#### **Fields**
|
|
- **Layout**: Flexbox with label-value pairs
|
|
- **Labels**: 9pt uppercase with letter spacing (180px width)
|
|
- **Values**: 11pt standard text (flexible width)
|
|
- **Spacing**: 12px gap between label and value
|
|
|
|
#### **Financial Tables**
|
|
- **Header**: Primary color background with white text
|
|
- **Rows**: Alternating colors for easy scanning
|
|
- **Hover Effects**: Subtle highlighting on hover
|
|
- **Typography**: 10pt for table content, 9pt for headers
|
|
|
|
#### **Special Boxes**
|
|
- **Summary Box**: Light blue background for key information
|
|
- **Highlight Box**: Light orange background for important notes
|
|
- **Success Box**: Light green background for positive indicators
|
|
- **Consistent**: 8px border radius and 16px padding
|
|
|
|
---
|
|
|
|
## 📋 Section Structure
|
|
|
|
### **Report Sections**
|
|
1. **Deal Overview** 📊
|
|
2. **Business Description** 🏢
|
|
3. **Market & Industry Analysis** 📈
|
|
4. **Financial Summary** 💰
|
|
5. **Management Team Overview** 👥
|
|
6. **Preliminary Investment Thesis** 🎯
|
|
7. **Key Questions & Next Steps** ❓
|
|
|
|
### **Data Handling**
|
|
- **Simple Fields**: Direct text display
|
|
- **Nested Objects**: Structured field display
|
|
- **Financial Data**: Tabular format with periods
|
|
- **Arrays**: List format when applicable
|
|
|
|
---
|
|
|
|
## 🔧 Template Variables
|
|
|
|
### **Dynamic Content**
|
|
- `${new Date().toLocaleDateString()}` - Current date
|
|
- `${new Date().toLocaleTimeString()}` - Current time
|
|
- `${section.icon}` - Section emoji icons
|
|
- `${section.title}` - Section titles
|
|
- `${this.formatFieldName(key)}` - Formatted field names
|
|
- `${value}` - Field values
|
|
|
|
### **Financial Table Structure**
|
|
```html
|
|
<table class="financial-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Period</th>
|
|
<th>Revenue</th>
|
|
<th>Growth</th>
|
|
<th>EBITDA</th>
|
|
<th>Margin</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>FY3</strong></td>
|
|
<td>${data?.revenue || '-'}</td>
|
|
<td>${data?.revenueGrowth || '-'}</td>
|
|
<td>${data?.ebitda || '-'}</td>
|
|
<td>${data?.ebitdaMargin || '-'}</td>
|
|
</tr>
|
|
<!-- Additional periods: FY2, FY1, LTM -->
|
|
</tbody>
|
|
</table>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 Usage in Code
|
|
|
|
### **Template Integration**
|
|
```typescript
|
|
// In pdfGenerationService.ts
|
|
private generateCIMReviewHTML(analysisData: any): string {
|
|
const sections = [
|
|
{ title: 'Deal Overview', data: analysisData.dealOverview, icon: '📊' },
|
|
{ title: 'Business Description', data: analysisData.businessDescription, icon: '🏢' },
|
|
// ... additional sections
|
|
];
|
|
|
|
// Generate HTML with template
|
|
let html = `<!DOCTYPE html>...`;
|
|
|
|
sections.forEach(section => {
|
|
if (section.data) {
|
|
html += `<div class="section"><h2><span class="section-icon">${section.icon}</span>${section.title}</h2>`;
|
|
// Process section data
|
|
html += `</div>`;
|
|
}
|
|
});
|
|
|
|
return html;
|
|
}
|
|
```
|
|
|
|
### **PDF Generation**
|
|
```typescript
|
|
async generateCIMReviewPDF(analysisData: any): Promise<Buffer> {
|
|
const html = this.generateCIMReviewHTML(analysisData);
|
|
const page = await this.getPage();
|
|
|
|
await page.setContent(html, { waitUntil: 'networkidle0' });
|
|
const pdfBuffer = await page.pdf({
|
|
format: 'A4',
|
|
printBackground: true,
|
|
margin: { top: '0.75in', right: '0.75in', bottom: '0.75in', left: '0.75in' }
|
|
});
|
|
|
|
this.releasePage(page);
|
|
return pdfBuffer;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Customization Options
|
|
|
|
### **Design System Customization**
|
|
- **CSS Variables**: Update `:root` variables for consistent theming
|
|
- **Color Palette**: Modify primary, success, highlight, and summary colors
|
|
- **Typography**: Change font stack and sizing
|
|
- **Spacing**: Adjust margins, padding, and gaps using design tokens
|
|
|
|
### **Styling Modifications**
|
|
- **Colors**: Update CSS variables for brand colors
|
|
- **Fonts**: Change font-family for different styles
|
|
- **Layout**: Adjust margins, padding, and spacing
|
|
- **Effects**: Modify shadows, borders, and visual effects
|
|
|
|
### **Content Structure**
|
|
- **Sections**: Add or remove report sections
|
|
- **Fields**: Customize field display formats
|
|
- **Tables**: Modify financial table structure
|
|
- **Icons**: Change section icons and styling
|
|
|
|
### **Branding**
|
|
- **Header**: Update company name and logo
|
|
- **Footer**: Modify footer content and styling
|
|
- **Colors**: Implement brand color scheme
|
|
- **Typography**: Use brand fonts
|
|
|
|
---
|
|
|
|
## 📊 Performance Considerations
|
|
|
|
### **Optimization Features**
|
|
- **CSS Variables**: Efficient design token system
|
|
- **Font Loading**: System fonts for fast rendering
|
|
- **Image Handling**: No external images for reliability
|
|
- **Print Optimization**: Print-specific CSS rules
|
|
- **Flexbox Layout**: Modern, efficient layout system
|
|
|
|
### **Browser Compatibility**
|
|
- **Puppeteer**: Optimized for headless browser rendering
|
|
- **CSS Support**: Modern CSS features for visual appeal
|
|
- **Fallbacks**: Graceful degradation for older browsers
|
|
- **Print Support**: Print-friendly styling
|
|
|
|
---
|
|
|
|
This HTML template provides a professional, visually appealing foundation for CIM Review PDF generation, with comprehensive styling and flexible content structure. |