fmard/pdf-api
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Organization Chart</title>7 <style>8 * { margin: 0; padding: 0; box-sizing: border-box; }9 body {10 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;11 font-size: 14px;12 line-height: 1.6;13 color: #1f2937;14 padding: 40px;15 max-width: 900px;16 margin: 0 auto;17 }18 .header {19 text-align: center;20 border-bottom: 3px solid #4f46e5;21 padding-bottom: 15px;22 margin-bottom: 30px;23 }24 .company-name {25 font-size: 22px;26 font-weight: 700;27 color: #4f46e5;28 }29 .title {30 font-size: 16px;31 font-weight: 700;32 color: #374151;33 margin-top: 4px;34 text-transform: uppercase;35 letter-spacing: 1px;36 }37 .date-info {38 font-size: 12px;39 color: #6b7280;40 margin-top: 4px;41 }42 .department-section {43 margin-bottom: 30px;44 }45 .dept-header {46 background: #4f46e5;47 color: white;48 padding: 12px 20px;49 border-radius: 6px;50 margin-bottom: 15px;51 display: flex;52 justify-content: space-between;53 align-items: center;54 }55 .dept-name {56 font-size: 16px;57 font-weight: 700;58 }59 .dept-head {60 font-size: 12px;61 opacity: 0.9;62 }63 .roles-grid {64 display: grid;65 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));66 gap: 12px;67 padding-left: 20px;68 }69 .role-card {70 background: white;71 border: 1px solid #e5e7eb;72 border-radius: 8px;73 padding: 14px;74 transition: all 0.2s;75 position: relative;76 }77 .role-card::before {78 content: '';79 position: absolute;80 left: 0;81 top: 0;82 bottom: 0;83 width: 4px;84 background: #4f46e5;85 border-radius: 8px 0 0 8px;86 }87 .role-card.head-card {88 border-color: #4f46e5;89 background: #eef2ff;90 }91 .role-name {92 font-weight: 700;93 color: #374151;94 font-size: 14px;95 }96 .role-title {97 font-size: 12px;98 color: #4f46e5;99 font-weight: 600;100 margin-top: 2px;101 }102 .role-reports {103 font-size: 11px;104 color: #9ca3af;105 margin-top: 4px;106 }107 .hierarchy-connector {108 width: 2px;109 height: 15px;110 background: #d1d5db;111 margin-left: 30px;112 }113 .summary-section {114 background: #f9fafb;115 border: 1px solid #e5e7eb;116 border-radius: 6px;117 padding: 15px 20px;118 margin-top: 30px;119 }120 .summary-title {121 font-weight: 700;122 color: #4f46e5;123 margin-bottom: 8px;124 }125 .summary-grid {126 display: grid;127 grid-template-columns: repeat(3, 1fr);128 gap: 15px;129 text-align: center;130 }131 .summary-stat .number {132 font-size: 24px;133 font-weight: 700;134 color: #4f46e5;135 }136 .summary-stat .label {137 font-size: 12px;138 color: #6b7280;139 }140 .footer {141 text-align: center;142 margin-top: 30px;143 font-size: 11px;144 color: #9ca3af;145 }146 </style>147</head>148<body>149 <div class="header">150 <div class="company-name">{{ company_name | default('Acme Corporation') }}</div>151 <div class="title">Organization Chart</div>152 <div class="date-info">Effective: {{ date | default('January 2025') }}</div>153 </div>154 155 {% if departments %}156 {% for dept in departments %}157 <div class="department-section">158 <div class="dept-header">159 <span class="dept-name">{{ dept.name }}</span>160 <span class="dept-head">Head: {{ dept.head }}</span>161 </div>162 <div class="roles-grid">163 {% for role in dept.roles %}164 <div class="role-card {% if role.title == dept.head %}head-card{% endif %}">165 <div class="role-name">{{ role.name }}</div>166 <div class="role-title">{{ role.title }}</div>167 {% if role.reports_to %}168 <div class="role-reports">Reports to: {{ role.reports_to }}</div>169 {% endif %}170 </div>171 {% endfor %}172 </div>173 </div>174 {% endfor %}175 {% else %}176 <div class="department-section">177 <div class="dept-header">178 <span class="dept-name">Engineering</span>179 <span class="dept-head">Head: CTO</span>180 </div>181 <div class="roles-grid">182 <div class="role-card head-card">183 <div class="role-name">Ahmad Reza</div>184 <div class="role-title">Chief Technology Officer</div>185 <div class="role-reports">Reports to: CEO</div>186 </div>187 <div class="role-card">188 <div class="role-name">Budi Santoso</div>189 <div class="role-title">Engineering Manager</div>190 <div class="role-reports">Reports to: CTO</div>191 </div>192 <div class="role-card">193 <div class="role-name">Citra Dewi</div>194 <div class="role-title">Senior Developer</div>195 <div class="role-reports">Reports to: Engineering Manager</div>196 </div>197 <div class="role-card">198 <div class="role-name">Dimas Putra</div>199 <div class="role-title">Junior Developer</div>200 <div class="role-reports">Reports to: Engineering Manager</div>201 </div>202 </div>203 </div>204 <div class="department-section">205 <div class="dept-header">206 <span class="dept-name">Human Resources</span>207 <span class="dept-head">Head: HR Director</span>208 </div>209 <div class="roles-grid">210 <div class="role-card head-card">211 <div class="role-name">Eka Sari</div>212 <div class="role-title">HR Director</div>213 <div class="role-reports">Reports to: CEO</div>214 </div>215 <div class="role-card">216 <div class="role-name">Faisal Rahman</div>217 <div class="role-title">HR Manager</div>218 <div class="role-reports">Reports to: HR Director</div>219 </div>220 <div class="role-card">221 <div class="role-name">Gita Putri</div>222 <div class="role-title">Recruiter</div>223 <div class="role-reports">Reports to: HR Manager</div>224 </div>225 </div>226 </div>227 <div class="department-section">228 <div class="dept-header">229 <span class="dept-name">Finance</span>230 <span class="dept-head">Head: CFO</span>231 </div>232 <div class="roles-grid">233 <div class="role-card head-card">234 <div class="role-name">Hendra Wijaya</div>235 <div class="role-title">Chief Financial Officer</div>236 <div class="role-reports">Reports to: CEO</div>237 </div>238 <div class="role-card">239 <div class="role-name">Indah Permata</div>240 <div class="role-title">Finance Manager</div>241 <div class="role-reports">Reports to: CFO</div>242 </div>243 </div>244 </div>245 {% endif %}246 247 <div class="summary-section">248 <div class="summary-title">Organization Summary</div>249 <div class="summary-grid">250 <div class="summary-stat">251 <div class="number">{% if departments %}{{ departments | length }}{% else %}3{% endif %}</div>252 <div class="label">Departments</div>253 </div>254 <div class="summary-stat">255 <div class="number">{% if departments %}{{ departments | sum(attribute='roles') | length }}{% else %}9{% endif %}</div>256 <div class="label">Total Roles</div>257 </div>258 <div class="summary-stat">259 <div class="number">{% if departments %}{{ departments | length }}{% else %}3{% endif %}</div>260 <div class="label">Department Heads</div>261 </div>262 </div>263 </div>264 265 <div class="footer">266 This organizational chart is for internal reference only. Last updated: {{ date | default('January 2025') }}267 </div>268</body>269</html>270