sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(prospecting): show per-category score breakdown on prospect detail

Browse Source 
- Restructure score_breakdown from flat dict to grouped by category:
  {technical_health: {flag: pts}, modernity: {...}, ...}
- Each category row shows score/max with progress bar + per-flag detail
  (e.g. Technical Health 15/40 → "very slow: 15 pts")
- Color-coded: green for positive flags, orange for issues
- "No issues detected" shown for clean categories

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-03-30 21:35:06 +02:00
parent b306a5e8f4
commit 50d50fcbd0
4 changed files with 73 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/modules/prospecting/templates/prospecting/admin/prospect-detail.html
View File

@@ -93,39 +93,34 @@
<div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
{{ section_header('Score Breakdown', icon='chart-bar') }}
<template x-if="prospect.score">
<div class="space-y-3">
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Technical Health</span>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="prospect.score.technical_health_score + '/40'"></span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Modernity</span>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="prospect.score.modernity_score + '/25'"></span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Business Value</span>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="prospect.score.business_value_score + '/25'"></span>
</div>
<div class="flex justify-between text-sm">
<span class="text-gray-600 dark:text-gray-400">Engagement</span>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="prospect.score.engagement_score + '/10'"></span>
</div>
<!-- Point-by-point breakdown -->
<template x-if="prospect.score.score_breakdown && Object.keys(prospect.score.score_breakdown).length">
<div class="pt-3 border-t border-gray-100 dark:border-gray-700">
<h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2">Details</h4>
<div class="space-y-1">
<template x-for="[flag, points] in Object.entries(prospect.score.score_breakdown).sort((a,b) => b[1] - a[1])" :key="flag">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-600 dark:text-gray-400" x-text="flag.replaceAll('_', ' ')"></span>
<span class="font-semibold px-1.5 py-0.5 rounded"
:class="['has_website','has_contacts','has_email','has_phone','has_ssl','modern_cms','fast_site','mobile_friendly'].includes(flag)
? 'text-green-700 bg-green-50 dark:text-green-300 dark:bg-green-900/30'
: 'text-red-700 bg-red-50 dark:text-red-300 dark:bg-red-900/30'"
x-text="(['has_website','has_contacts','has_email','has_phone','has_ssl','modern_cms','fast_site','mobile_friendly'].includes(flag) ? '+' : '-') + points"></span>
</div>
</template>
<div class="space-y-4">
<template x-for="cat in scoreCategories()" :key="cat.key">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="font-medium text-gray-700 dark:text-gray-300" x-text="cat.label"></span>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="cat.score + '/' + cat.max"></span>
</div>
<!-- Progress bar -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mb-2">
<div class="h-1.5 rounded-full" :class="cat.score > 0 ? 'bg-purple-500' : 'bg-gray-300 dark:bg-gray-600'"
:style="'width:' + Math.round(cat.score / cat.max * 100) + '%'"></div>
</div>
<!-- Per-flag details -->
<template x-if="cat.flags.length > 0">
<div class="space-y-0.5 ml-2">
<template x-for="[flag, pts] in cat.flags" :key="flag">
<div class="flex items-center justify-between text-xs">
<span class="text-gray-500 dark:text-gray-400" x-text="flag.replaceAll('_', ' ')"></span>
<span class="font-semibold px-1.5 py-0.5 rounded"
:class="cat.positive.includes(flag)
? 'text-green-700 bg-green-50 dark:text-green-300 dark:bg-green-900/30'
: 'text-orange-700 bg-orange-50 dark:text-orange-300 dark:bg-orange-900/30'"
x-text="pts + ' pts'"></span>
</div>
</template>
</div>
</template>
<p x-show="cat.flags.length === 0" class="text-xs text-gray-400 ml-2">No issues detected</p>
</div>
</template>
</div>