# 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
CIM Review Report
```
---
## 🎨 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
| Period |
Revenue |
Growth |
EBITDA |
Margin |
| FY3 |
${data?.revenue || '-'} |
${data?.revenueGrowth || '-'} |
${data?.ebitda || '-'} |
${data?.ebitdaMargin || '-'} |
```
---
## 🎯 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 = `...`;
sections.forEach(section => {
if (section.data) {
html += `${section.icon}${section.title}
`;
// Process section data
html += ``;
}
});
return html;
}
```
### **PDF Generation**
```typescript
async generateCIMReviewPDF(analysisData: any): Promise {
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.