admin/cim_summary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8b15732a982218ba3bdf3ec12942f7a2914b2411
cim_summary/CIM_REVIEW_PDF_TEMPLATE.md

14 KiB
Raw Blame History

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

<!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

<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

// 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

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.

Reference in New Issue View Git Blame Copy Permalink