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

- 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:
2026-03-30 21:35:06 +02:00
parent b306a5e8f4
commit 50d50fcbd0
4 changed files with 73 additions and 60 deletions

View File

@@ -18,7 +18,7 @@ class ProspectScoreResponse(BaseModel):
business_value_score: int business_value_score: int
engagement_score: int engagement_score: int
reason_flags: list[str] = [] reason_flags: list[str] = []
score_breakdown: dict[str, int] | None = None score_breakdown: dict[str, dict[str, int]] | None = None
lead_tier: str | None = None lead_tier: str | None = None
notes: str | None = None notes: str | None = None
created_at: datetime created_at: datetime

View File

@@ -103,33 +103,38 @@ class ScoringService:
business_value = 0 business_value = 0
engagement = 0 engagement = 0
flags = [] flags = []
breakdown = {} breakdown = {
"technical_health": {},
"modernity": {},
"business_value": {},
"engagement": {},
}
# === TECHNICAL HEALTH (max 40) === # === TECHNICAL HEALTH (max 40) ===
if not prospect.uses_https: if not prospect.uses_https:
tech_health += 15 tech_health += 15
flags.append("no_ssl") flags.append("no_ssl")
breakdown["no_ssl"] = 15 breakdown["technical_health"]["no_ssl"] = 15
perf = prospect.performance_profile perf = prospect.performance_profile
if perf and perf.performance_score is not None: if perf and perf.performance_score is not None:
if perf.performance_score < 30: if perf.performance_score < 30:
tech_health += 15 tech_health += 15
flags.append("very_slow") flags.append("very_slow")
breakdown["very_slow"] = 15 breakdown["technical_health"]["very_slow"] = 15
elif perf.performance_score < 50: elif perf.performance_score < 50:
tech_health += 10 tech_health += 10
flags.append("slow") flags.append("slow")
breakdown["slow"] = 10 breakdown["technical_health"]["slow"] = 10
elif perf.performance_score < 70: elif perf.performance_score < 70:
tech_health += 5 tech_health += 5
flags.append("moderate_speed") flags.append("moderate_speed")
breakdown["moderate_speed"] = 5 breakdown["technical_health"]["moderate_speed"] = 5
if perf.is_mobile_friendly is False: if perf.is_mobile_friendly is False:
tech_health += 10 tech_health += 10
flags.append("not_mobile_friendly") flags.append("not_mobile_friendly")
breakdown["not_mobile_friendly"] = 10 breakdown["technical_health"]["not_mobile_friendly"] = 10
tech_health = min(tech_health, 40) tech_health = min(tech_health, 40)
@@ -139,36 +144,36 @@ class ScoringService:
if tp.cms and tp.cms.lower() in OUTDATED_CMS: if tp.cms and tp.cms.lower() in OUTDATED_CMS:
modernity += 15 modernity += 15
flags.append("outdated_cms") flags.append("outdated_cms")
breakdown["outdated_cms"] = 15 breakdown["modernity"]["outdated_cms"] = 15
elif tp.cms is None and prospect.has_website: elif tp.cms is None and prospect.has_website:
modernity += 5 modernity += 5
flags.append("unknown_cms") flags.append("unknown_cms")
breakdown["unknown_cms"] = 5 breakdown["modernity"]["unknown_cms"] = 5
if tp.js_framework and tp.js_framework.lower() == "jquery": if tp.js_framework and tp.js_framework.lower() == "jquery":
modernity += 5 modernity += 5
flags.append("legacy_js") flags.append("legacy_js")
breakdown["legacy_js"] = 5 breakdown["modernity"]["legacy_js"] = 5
if not tp.analytics: if not tp.analytics:
modernity += 5 modernity += 5
flags.append("no_analytics") flags.append("no_analytics")
breakdown["no_analytics"] = 5 breakdown["modernity"]["no_analytics"] = 5
modernity = min(modernity, 25) modernity = min(modernity, 25)
# === BUSINESS VALUE (max 25) === # === BUSINESS VALUE (max 25) ===
if prospect.has_website: if prospect.has_website:
business_value += 10 business_value += 10
breakdown["has_website"] = 10 breakdown["business_value"]["has_website"] = 10
if tp and tp.ecommerce_platform: if tp and tp.ecommerce_platform:
business_value += 10 business_value += 10
breakdown["has_ecommerce"] = 10 breakdown["business_value"]["has_ecommerce"] = 10
if prospect.domain_name and len(prospect.domain_name) <= 15: if prospect.domain_name and len(prospect.domain_name) <= 15:
business_value += 5 business_value += 5
breakdown["short_domain"] = 5 breakdown["business_value"]["short_domain"] = 5
business_value = min(business_value, 25) business_value = min(business_value, 25)
@@ -177,7 +182,7 @@ class ScoringService:
if contacts: if contacts:
engagement += 5 engagement += 5
flags.append("has_contacts") flags.append("has_contacts")
breakdown["has_contacts"] = 5 breakdown["engagement"]["has_contacts"] = 5
has_email = any(c.contact_type == "email" for c in contacts) has_email = any(c.contact_type == "email" for c in contacts)
has_phone = any(c.contact_type == "phone" for c in contacts) has_phone = any(c.contact_type == "phone" for c in contacts)
@@ -185,11 +190,11 @@ class ScoringService:
if has_email: if has_email:
engagement += 3 engagement += 3
flags.append("has_email") flags.append("has_email")
breakdown["has_email"] = 3 breakdown["engagement"]["has_email"] = 3
if has_phone: if has_phone:
engagement += 2 engagement += 2
flags.append("has_phone") flags.append("has_phone")
breakdown["has_phone"] = 2 breakdown["engagement"]["has_phone"] = 2
engagement = min(engagement, 10) engagement = min(engagement, 10)
@@ -202,7 +207,12 @@ class ScoringService:
business_value = 0 business_value = 0
engagement = 0 engagement = 0
flags = [] flags = []
breakdown = {} breakdown = {
"technical_health": {},
"modernity": {},
"business_value": {},
"engagement": {},
}
# Offline prospects without a website are high opportunity # Offline prospects without a website are high opportunity
if not prospect.has_website: if not prospect.has_website:
@@ -210,9 +220,9 @@ class ScoringService:
modernity = 20 modernity = 20
business_value = 20 business_value = 20
flags.extend(["no_website"]) flags.extend(["no_website"])
breakdown["no_website_tech"] = 30 breakdown["technical_health"]["no_website"] = 30
breakdown["no_website_mod"] = 20 breakdown["modernity"]["no_website"] = 20
breakdown["no_website_biz"] = 20 breakdown["business_value"]["no_website"] = 20
# Check for gmail usage (from contacts) # Check for gmail usage (from contacts)
contacts = prospect.contacts or [] contacts = prospect.contacts or []
@@ -223,7 +233,7 @@ class ScoringService:
if has_gmail: if has_gmail:
modernity += 10 modernity += 10
flags.append("uses_gmail") flags.append("uses_gmail")
breakdown["uses_gmail"] = 10 breakdown["modernity"]["uses_gmail"] = 10
modernity = min(modernity, 25) modernity = min(modernity, 25)
@@ -231,7 +241,7 @@ class ScoringService:
if prospect.source in ("street", "networking_event", "referral"): if prospect.source in ("street", "networking_event", "referral"):
engagement += 5 engagement += 5
flags.append("met_in_person") flags.append("met_in_person")
breakdown["met_in_person"] = 5 breakdown["engagement"]["met_in_person"] = 5
if contacts: if contacts:
has_email = any(c.contact_type == "email" for c in contacts) has_email = any(c.contact_type == "email" for c in contacts)
@@ -239,11 +249,11 @@ class ScoringService:
if has_email: if has_email:
engagement += 3 engagement += 3
flags.append("has_email") flags.append("has_email")
breakdown["has_email"] = 3 breakdown["engagement"]["has_email"] = 3
if has_phone: if has_phone:
engagement += 2 engagement += 2
flags.append("has_phone") flags.append("has_phone")
breakdown["has_phone"] = 2 breakdown["engagement"]["has_phone"] = 2
engagement = min(engagement, 10) engagement = min(engagement, 10)

View File

@@ -123,9 +123,17 @@ function prospectDetail(prospectId) {
return 'text-gray-600'; return 'text-gray-600';
}, },
isPositiveFlag(flag) { scoreCategories() {
var positive = ['has_website', 'has_contacts', 'has_email', 'has_phone', 'has_ssl', 'modern_cms', 'fast_site', 'mobile_friendly']; var s = this.prospect?.score;
return positive.indexOf(flag) !== -1; if (!s) return [];
var bd = s.score_breakdown || {};
var positive = ['has_website', 'has_contacts', 'has_email', 'has_phone', 'has_ssl', 'modern_cms', 'fast_site', 'mobile_friendly', 'has_ecommerce', 'short_domain', 'met_in_person'];
return [
{ key: 'technical_health', label: 'Technical Health', score: s.technical_health_score, max: 40, flags: Object.entries(bd.technical_health || {}), positive: positive },
{ key: 'modernity', label: 'Modernity', score: s.modernity_score, max: 25, flags: Object.entries(bd.modernity || {}), positive: positive },
{ key: 'business_value', label: 'Business Value', score: s.business_value_score, max: 25, flags: Object.entries(bd.business_value || {}), positive: positive },
{ key: 'engagement', label: 'Engagement', score: s.engagement_score, max: 10, flags: Object.entries(bd.engagement || {}), positive: positive },
];
}, },
techProfileEntries() { techProfileEntries() {

View File

@@ -93,39 +93,34 @@
<div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800"> <div class="p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
{{ section_header('Score Breakdown', icon='chart-bar') }} {{ section_header('Score Breakdown', icon='chart-bar') }}
<template x-if="prospect.score"> <template x-if="prospect.score">
<div class="space-y-3"> <div class="space-y-4">
<div class="flex justify-between text-sm"> <template x-for="cat in scoreCategories()" :key="cat.key">
<span class="text-gray-600 dark:text-gray-400">Technical Health</span> <div>
<span class="font-semibold text-gray-700 dark:text-gray-200" x-text="prospect.score.technical_health_score + '/40'"></span> <div class="flex justify-between text-sm mb-1">
</div> <span class="font-medium text-gray-700 dark:text-gray-300" x-text="cat.label"></span>
<div class="flex justify-between text-sm"> <span class="font-semibold text-gray-700 dark:text-gray-200" x-text="cat.score + '/' + cat.max"></span>
<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> </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> </div>
</template> </template>
</div> </div>