Files
Anton_wireframe/app/templates/report.html
T

330 lines
14 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Investor Profile Report</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@page {
size: A4;
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, sans-serif;
}
/* Each page is exactly one A4 sheet */
.page {
width: 210mm;
height: 297mm;
position: relative;
background: white;
overflow: hidden;
}
/* Adds a break between pages (for print/PDF) */
.page-with-break {
page-break-after: always;
}
/* Inner content wrapper for consistent padding */
.page-content {
box-sizing: border-box;
padding: 48px; /* equivalent to Tailwind p-12 */
height: 100%;
display: flex;
flex-direction: column;
}
.tag {
display: inline-block;
padding: 4px 12px;
background: #f3f4f6;
border-radius: 4px;
font-size: 12px;
margin: 4px;
}
/* Ensure the footer text stays inside page bounds */
.page-footer {
position: absolute;
bottom: 48px;
right: 48px;
font-size: 10px;
color: #9ca3af; /* Tailwind gray-400 */
}
</style>
</head>
<body>
<!-- Page 1 -->
<div class="page page-with-break">
<div class="page-content">
<div class="flex justify-between items-start mb-8">
<div>
<p class="text-sm text-gray-600 mb-2">Investor Profile</p>
<h1 class="text-4xl font-bold text-gray-900">
{{ investor.name }}
</h1>
</div>
<a
href="{{ investor.website }}"
target="_blank"
class="bg-gray-200 text-gray-700 px-4 py-2 rounded text-sm no-underline"
>Visit Website →</a
>
</div>
<div class="grid grid-cols-2 gap-8 flex-grow">
<!-- Left Column -->
<div>
<div class="mb-4">
<h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
Investor Description
</h2>
<p class="text-sm text-gray-700 leading-relaxed">
{{ investor.description or 'No description available.' }}
</p>
</div>
<div class="mb-4">
<h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
Portfolio Highlights
</h2>
<div class="flex flex-wrap gap-2">
{% if investor.portfolio_highlights %}
{% for company in investor.portfolio_highlights[:5] %}
<span class="tag">{{ company }}</span>
{% endfor %}
{% else %}
<p class="text-sm text-gray-500">
No portfolio highlights available
</p>
{% endif %}
</div>
</div>
<div class="mb-4">
<h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
Senior Leadership
</h2>
{% if investor.team_members %}
{% for member in investor.team_members[:2] %}
<div class="mb-3">
<p class="text-sm font-semibold text-gray-900">
{{ member.name }}
</p>
<p class="text-sm text-gray-600">
{{ member.role or member.title or 'Team Member' }}
</p>
{% if member.email %}
<p class="text-xs text-blue-600">
{{ member.email }}
</p>
{% endif %}
</div>
{% endfor %}
{% else %}
<p class="text-sm text-gray-500">No team information available</p>
{% endif %}
</div>
</div>
<!-- Right Column -->
<div class="bg-gray-50 p-6 rounded-lg">
<h2 class="text-sm font-bold text-gray-900 uppercase mb-4">
Key Data
</h2>
<div class="space-y-3 text-sm">
<div>
<p class="text-xs text-gray-600">Headquarters:</p>
<p class="font-semibold text-gray-900">
{{ investor.headquarters or 'N/A' }}
</p>
</div>
<div>
<p class="text-xs text-gray-600">Sectors:</p>
<p class="font-semibold text-gray-900">
{% if investor.sectors %}
{{ investor.sectors | join(', ') }}
{% else %}
N/A
{% endif %}
</p>
</div>
<div>
<p class="text-xs text-gray-600">AUM (EUR million):</p>
<p class="font-semibold text-gray-900">
{% if investor.aum %}
€{{ '{:,.0f}'.format(investor.aum / 1000000) }}M
{% else %}
N/A
{% endif %}
</p>
</div>
<div>
<p class="text-xs text-gray-600 mb-1">Number of Funds:</p>
<p class="font-semibold text-gray-900">
{{ investor.funds | length if investor.funds else 'N/A' }}
</p>
</div>
</div>
<div class="mt-4">
<h3 class="text-xs font-bold text-gray-900 uppercase mb-2">
Fund Details
</h3>
{% if investor.funds %}
{% for fund in investor.funds %}
<div class="mb-3 pb-3 border-b border-gray-200">
<p class="text-sm font-semibold text-gray-900 mb-1">
{{ fund.fund_name or 'Fund ' + loop.index|string }}
</p>
<div class="text-xs text-gray-700 space-y-1">
{% if fund.fund_size %}
<p>Fund Size: €{{ '{:,.0f}'.format(fund.fund_size / 1000000) }}M</p>
{% endif %}
{% if fund.check_size_lower and fund.check_size_upper %}
<p>Check Size: €{{ '{:,.0f}'.format(fund.check_size_lower / 1000000) }}M - €{{ '{:,.0f}'.format(fund.check_size_upper / 1000000) }}M</p>
{% endif %}
{% if fund.geographic_focus %}
<p>Geography: {{ fund.geographic_focus }}</p>
{% endif %}
{% if fund.investment_stages %}
<p>Stages: {{ fund.investment_stages | join(', ') }}</p>
{% endif %}
{% if fund.sectors %}
<p>Sectors: {{ fund.sectors[:3] | join(', ') }}</p>
{% endif %}
</div>
</div>
{% endfor %}
{% else %}
<p class="text-xs text-gray-500">No fund information available</p>
{% endif %}
</div>
</div>
</div>
<div class="page-footer">Page 1</div>
</div>
</div>
<!-- Page 2 -->
{% if project %}
<div class="page">
<div class="page-content">
<h1 class="text-3xl font-bold text-gray-900 mb-8">
{{ investor.name }}: Mandate Match Analysis
</h1>
<!-- Overall Match Circle -->
<div class="flex justify-center mb-12">
<div class="text-center">
<p class="text-sm font-bold text-gray-700 uppercase mb-4">
Overall Mandate Match
</p>
<div
class="w-48 h-48 rounded-full border-8 border-green-400 flex items-center justify-center bg-green-50 mx-auto"
>
<span class="text-5xl font-bold text-green-600"
>{{ compatibility_score }}%</span
>
</div>
</div>
</div>
<!-- Mandate Alignment Analysis Table -->
<div class="mb-12">
<h2 class="text-xl font-bold text-gray-900 mb-6">
Mandate Alignment Analysis
</h2>
<table class="w-full border-collapse">
<thead>
<tr class="border-b-2 border-gray-300">
<th
class="text-left py-3 px-4 text-sm font-bold text-gray-700"
>
Criterion
</th>
<th
class="text-left py-3 px-4 text-sm font-bold text-gray-700"
>
Mandate Requirement
</th>
<th
class="text-left py-3 px-4 text-sm font-bold text-gray-700"
>
Investor Evidence (from Database)
</th>
<th
class="text-left py-3 px-4 text-sm font-bold text-gray-700"
>
Match Score
</th>
<th
class="text-left py-3 px-4 text-sm font-bold text-gray-700"
>
Weight
</th>
</tr>
</thead>
<tbody>
{% for criterion in match_criteria %}
<tr class="border-b border-gray-200">
<td class="py-4 px-4 text-sm text-gray-900">
{{ criterion.name }}
</td>
<td class="py-4 px-4 text-sm text-gray-700">
{{ criterion.requirement }}
</td>
<td class="py-4 px-4 text-sm text-gray-700">
{{ criterion.evidence }}
</td>
<td class="py-4 px-4 text-sm">
<span
class="{% if criterion.match == 'Perfect' %}text-green-600{% elif criterion.match == 'Strong' %}text-blue-600{% else %}text-yellow-600{% endif %} font-semibold"
>
{{ criterion.match }}
</span>
</td>
<td class="py-4 px-4 text-sm text-gray-700">
{{ criterion.weight }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Final Recommendation -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded">
<h3 class="text-lg font-bold text-gray-900 mb-3">
Final Recommendation & Rationale
</h3>
<p class="text-sm text-gray-700 leading-relaxed">
{{ recommendation or "High Priority. A strong target due to
exceptional alignment on the most heavily-weighted criteria:
Sector and Stage. The strong geographic fit in the DACH
region further solidifies this recommendation." }}
</p>
</div>
<div class="absolute bottom-12 right-12 text-xs text-gray-400">
Page 2
</div>
</div>
{% endif %}
</body>
</html>