kyd-shared-badge 0.2.26 → 0.2.28

package/src/components/GraphInsights.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import React from 'react';
+// import { red, yellow, green } from '@/components/badge/colors';
+import { GraphInsightsPayload, ScoringSummary } from '../types';
+import {
+  ResponsiveContainer,
+  Tooltip,
+  PieChart,
+  Pie,
+  Cell,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+  // BarChart,
+  // Bar,
+  // XAxis,
+  // YAxis,
+  // CartesianGrid,
+  // Legend,
+} from 'recharts';
+
+// avoid platform based charts.
+// target over arching insights that can 
+// be used to build a mental model of the user's profile
+
+// Manual overrides for the radar chart's average ring per category (0–100).
+// Edit this object to set a custom average for specific categories.
+// Keys must match the category names exactly as they appear on the radar axes.
+// Example:
+const CATEGORY_AVG_OVERRIDES: Record<string, number> = {
+  "Authenticity": 87,
+  "Activity": 87,
+  "Network": 50,
+  "Sanctions and Criminal": 100,
+  "Telemetry": 100,
+  "Portfolio": 65,
+  "Skills": 72,
+  "Experience": 85,
+};
+// const CATEGORY_AVG_OVERRIDES: Record<string, number> = {};
+
+const GraphInsights = ({
+  graphInsights,
+  categories,
+  genre,
+  scoringSummary,
+}: {
+  graphInsights: GraphInsightsPayload;
+  categories?: string[];
+  genre: string;
+  scoringSummary?: ScoringSummary;
+}) => {
+  const getCategoryTooltipCopy = (category: string): string => {
+    const name = (category || '').toLowerCase();
+
+    // Specific technical facets
+    if (/network|connection|collab|peer/.test(name)) return 'Signals from the developer’s professional connections, collaborations, and peer recognition.';
+    if (/project|repo|portfolio|work/.test(name)) return 'Signals from a developer’s visible projects, repositories, or published work that indicate breadth and quality of output.';
+    if (/skill|cert|assessment|endorse/.test(name)) return 'Signals tied to specific technical abilities, such as verified certifications, assessments, or endorsements.';
+    if (/experience|tenure|history/.test(name)) return 'Signals of tenure and diversity of professional or project involvement over time.';
+    if (/activity|recency|frequency|engage/.test(name)) return 'Signals of recency and frequency of developer engagement in professional or technical platforms.';
+
+    // Specific risk facets
+    if (/sanction|legal|criminal|regulatory|ofac|fbi|watchlist/.test(name)) return 'Signals of legal, criminal, or regulatory red flags linked to an identity.';
+    if (/identity|authentic|consisten/.test(name)) return 'Signals that indicate whether a developer’s identity is genuine and consistent across platforms.';
+    if (/reputation|review|rating|feedback|perceive|peer/.test(name)) return 'Signals of how peers, clients, and communities perceive the developer.';
+    if (/geo|jurisdiction|country|region|ip|location/.test(name)) return 'Signals tied to a developer’s geographic or jurisdictional context.';
+    if (/security|cyber/.test(name)) return 'Signals of security posture and potential cyber-risk exposure.';
+
+    // Generic umbrellas (pick one only)
+    if (/risk/.test(name)) return 'KYD Risk surfaces signals of authenticity, reputation, and environmental telemetry that indicate potential risks in engaging with a developer.';
+    if (/tech|technical/.test(name)) return 'KYD Technical surfaces signals from a developer’s portfolio, skills, experience, activity, and network to indicate the likelihood of technical capability.';
+
+    // Fallback
+    return 'Share of overall contribution by category based on applied weights.';
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const CategoryPieTooltip = ({ active, payload }: any) => {
+    if (!active || !payload || !payload.length) return null;
+    const p = payload[0];
+    const entry = p && p.payload ? p.payload : {};
+    const name = entry.name || p.name || '';
+    const percent = Math.round(((entry.share || entry.percent || 0) * 100));
+    const line = getCategoryTooltipCopy(String(name));
+    return (
+      <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, maxWidth: 320 }}>
+        <div style={{ fontWeight: 600 }}>{name}</div>
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Contributes {percent}% to overall KYD {genre!.charAt(0).toUpperCase() + genre?.slice(1)} Pillar score.</div>
+        <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{line}</div>
+      </div>
+    );
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const RadarCategoryTooltip = ({ active, payload, label }: any) => {
+    if (!active || !payload || !payload.length) return null;
+    const p = payload[0];
+    const entry = p && p.payload ? p.payload : {};
+    const name = entry.axis || label || '';
+    const score = Number(entry.score ?? p.value ?? 0);
+    const avg = entry.avg !== undefined ? Number(entry.avg) : undefined;
+    const line = getCategoryTooltipCopy(String(name));
+    return (
+      <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, maxWidth: 320 }}>
+        <div style={{ fontWeight: 600 }}>{name}</div>
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
+          Score: {Math.round(score)}{avg !== undefined ? ` • Avg: ${Math.round(avg)}` : ''}
+        </div>
+        <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{line}</div>
+      </div>
+    );
+  };
+
+  const allowedCategoriesSet = (() => {
+    const list = Array.isArray(categories) ? categories : undefined;
+    if (!list || list.length === 0) return undefined;
+    const set = new Set<string>();
+    for (const c of list) if (typeof c === 'string' && c) set.add(c);
+    return set.size > 0 ? set : undefined;
+  })();
+
+  const categoryData = (graphInsights?.categoryAggregate || [])
+    .map((c) => ({ category: c.category, value: Number(c.applied_weight_sum || 0) }))
+    .filter((c) => (allowedCategoriesSet ? allowedCategoriesSet.has(c.category) : true))
+    .filter((c) => c.value > 0)
+    .sort((a, b) => b.value - a.value)
+    .slice(0, 10);
+
+  // Legend dataset for pie: include ALL categories (even 0%) and compute share
+  const legendData = (() => {
+    const list = (graphInsights?.categoryAggregate || [])
+      .map((c) => ({ name: c.category, value: Number(c.applied_weight_sum || 0) }))
+      .filter((c) => (allowedCategoriesSet ? allowedCategoriesSet.has(c.name) : true));
+    const total = list.reduce((sum, d) => sum + (d.value || 0), 0);
+    return list
+      .map((d) => ({ ...d, share: total > 0 ? d.value / total : 0 }))
+      .sort((a, b) => (b.share - a.share));
+  })();
+
+  // Radar (spider) chart dataset — category scores out of 100 from backend
+  const radarData = (() => {
+    let percentList = (graphInsights?.categoryScoresPercent || []) as Array<{ category: string; percent?: number }>;
+
+    // Fallback: derive from scoringSummary.category_scores if graphInsights is missing it
+    if ((!percentList || percentList.length === 0) && scoringSummary && scoringSummary.category_scores) {
+      percentList = Object.entries(scoringSummary.category_scores).map(([cat, entry]) => ({
+        category: cat,
+        // Prefer business, else combined, else atomic percent_progress
+        percent: Number(
+          (entry?.business?.percent_progress ?? entry?.combined?.percent_progress ?? entry?.atomic?.percent_progress ?? 0)
+        ),
+      }));
+    }
+
+    if (!percentList || percentList.length === 0) return [] as Array<{ axis: string; score: number; avg?: number }>;
+
+    // Build map for quick lookup
+    const percentMap = new Map<string, number>();
+    for (const row of percentList) {
+      percentMap.set(row.category, Math.max(0, Math.min(100, Math.round(Number(row?.percent || 0)))));
+    }
+
+    // Ensure we include all requested section categories, even if 0
+    const axes: string[] = allowedCategoriesSet
+      ? Array.from(allowedCategoriesSet)
+      : Array.from(new Set(percentList.map((c) => c.category)));
+
+    const base = axes.map((cat) => ({
+      axis: cat,
+      score: percentMap.has(cat) ? (percentMap.get(cat) as number) : 0,
+    }));
+    const values = base.map((d) => d.score);
+    const defaultAvg = values.length ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : 0;
+    const clamp = (n: number) => Math.max(0, Math.min(100, Math.round(Number(n ?? 0))));
+    return base
+      .map((d) => ({
+        ...d,
+        avg: Object.prototype.hasOwnProperty.call(CATEGORY_AVG_OVERRIDES, d.axis)
+          ? clamp(CATEGORY_AVG_OVERRIDES[d.axis])
+          : defaultAvg,
+      }))
+      .slice(0, 8);
+  })();
+
+  if (!graphInsights) return null;
+
+  return (
+    <div className="grid grid-cols-1 gap-6">
+      {/* Spider Chart: Category Balance (genre-scoped) */}
+      {radarData && radarData.length > 2 && (
+        <div className={'rounded-lg p-4 pb-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6" >
+            
+            {/* Spider Chart: Category Scores */}
+            <div className="" style={{ width: '100%', height: 450 }}>
+              <div className="" style={{ width: '100%', height: 375 }}>
+                <div className="mb-2">
+                  <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{genre ? `${genre} ` : ''} Category Contributions - Percentages</div>
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>The spider diagram displays the KYD {genre} score across its sub-categories, with each point representing the strength of available evidence signals</div>
+                </div>
+                <ResponsiveContainer>
+                  <RadarChart data={radarData} cx="50%" cy="50%" outerRadius="70%">
+                    <PolarGrid stroke="var(--icon-button-secondary)" />
+                    <PolarAngleAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} />
+                    <PolarRadiusAxis angle={55} domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} className="text-sm" />
+                    {/* Primary area */}
+                    <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} />
+                    {/* Subtle average ring (arbitrary benchmark for comparison) */}
+                    <Radar name="Avg" dataKey="avg" stroke="rgba(128,128,128,0.6)" fill="rgba(128,128,128,0.08)" strokeDasharray="4 4" fillOpacity={1} />
+                    <Tooltip content={<RadarCategoryTooltip />} />
+                  </RadarChart>
+                </ResponsiveContainer>
+              </div>
+              {/* Custom legend below the spider chart */}
+              <div className="mt-3 flex items-center justify-center gap-4" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
+                <div className="flex items-center gap-2">
+                  <span style={{ display: 'inline-block', width: 24, borderBottom: '2px solid var(--text-main)' }} />
+                  <span>Score</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span style={{ display: 'inline-block', width: 24, borderBottom: '1px dashed rgba(128,128,128,0.6)' }} />
+                  <span>Average</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Pie Chart: Category Distribution */}
+            <div className="md:border-l md:pl-6" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 450 }}>
+              <div className="" style={{ borderColor: 'var(--icon-button-secondary)', width: '100%', height: 375 }}>
+                <div className="mb-2">
+                  <div className={'font-medium'} style={{ color: 'var(--text-main)' }}>{genre ? `${genre} ` : ''} Category Contributions - Proportions</div>
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>The donut diagram illustrates the relative contribution of each {genre} category to the pillar’s composite score.</div>
+                </div>
+                <ResponsiveContainer>
+                  <PieChart>
+                    {(() => {
+                      const isDarkMode = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+                      const palette = !isDarkMode
+                        ? ['#E0E0E0', '#BDBDBD', '#9E9E9E', '#757575', '#616161', '#424242', '#212121']
+                        : ['#212121', '#424242', '#616161', '#757575', '#9E9E9E', '#BDBDBD', '#E0E0E0'];
+                      const total = categoryData.reduce((sum, d) => sum + (d.value || 0), 0);
+                      const pieData = categoryData.map(d => ({
+                        name: d.category,
+                        value: d.value,
+                        share: total > 0 ? (d.value / total) : 0,
+                      }));
+
+                      // Smaller, theme-aware labels
+                      const renderLabel = (props: {x: number, y: number, textAnchor: string, percent: number, name: string, payload: {name: string}}) => {
+                        const pct = Math.round(((props?.percent ?? 0) * 100));
+                        if (pct < 4) return null;
+                        const name = props?.name ?? props?.payload?.name;
+                        const { x, y, textAnchor } = props;
+                        return (
+                          <text x={x} y={y} textAnchor={textAnchor} dominantBaseline="central" style={{ fill: 'var(--text-secondary)', fontSize: 12 }}>
+                            {`${name} ${pct}%`}
+                          </text>
+                        );
+                      };
+
+                      return (
+                        <Pie
+                          data={pieData}
+                          dataKey="value"
+                          nameKey="name"
+                          innerRadius={60}
+                          outerRadius={90}
+                          startAngle={90}
+                          endAngle={-270}
+                          paddingAngle={1.5}
+                          isAnimationActive
+                          label={renderLabel}
+                          labelLine={false}
+                        >
+                          {pieData.map((_, idx) => (
+                            <Cell key={`cat-cell-${idx}`} stroke="var(--content-card-background)" strokeWidth={1} fill={palette[idx % palette.length]} />
+                          ))}
+                        </Pie>
+                      );
+                    })()}
+                    <Tooltip content={<CategoryPieTooltip />} />
+                  </PieChart>
+                </ResponsiveContainer>
+                
+                </div>
+                {/* Legend below the pie chart: includes 0% categories */}
+                <div className="mt-3">
+                {(() => {
+                  const isDarkMode = typeof document !== 'undefined' && document.documentElement.classList.contains('dark');
+                  const palette = !isDarkMode
+                    ? ['#E0E0E0', '#BDBDBD', '#9E9E9E', '#757575', '#616161', '#424242', '#212121']
+                    : ['#212121', '#424242', '#616161', '#757575', '#9E9E9E', '#BDBDBD', '#E0E0E0'];
+                  const pieNames = categoryData.map((d) => d.category);
+                  const getColor = (name: string) => {
+                    const idx = pieNames.indexOf(name);
+                    return idx >= 0 ? palette[idx % palette.length] : 'rgba(128,128,128,0.5)';
+                  };
+                  return (
+                    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
+                      {legendData.map((item, idx) => {
+                        const pct = Math.round(((item?.share ?? 0) * 100));
+                        return (
+                          <div key={`legend-${item.name}-${idx}`} className="flex items-center gap-2">
+                            <span style={{ display: 'inline-block', width: 10, height: 10, background: getColor(item.name), border: '1px solid var(--icon-button-secondary)' }} />
+                            <span>{item.name} {pct}%</span>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  );
+                })()}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Provider Impact: Atomic vs Business (stacked) */}
+      {/* {providersData && providersData.length > 0 && (
+        <div className={'rounded-lg p-4 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Provider Impact</h4>
+          <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>Which platforms most influence this profile. Stacked bars separate objective signal (Atomic) from business-context signal (Business).</p>
+          <div style={{ width: '100%', height: 320 }}>
+            <ResponsiveContainer>
+              <BarChart data={providersData} margin={{ top: 8, right: 8, left: 8, bottom: 8 }}>
+                <CartesianGrid strokeDasharray="3 3" stroke="var(--icon-button-secondary)" />
+                <XAxis dataKey="name" tick={{ fill: 'var(--text-secondary)' }} />
+                <YAxis tick={{ fill: 'var(--text-secondary)' }} />
+                <Tooltip
+                  contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }}
+                />
+                <Legend wrapperStyle={{ color: 'var(--text-secondary)' }} />
+                <Bar dataKey="atomic" stackId="a" fill={green} name="Atomic" />
+                <Bar dataKey="business" stackId="a" fill={yellow} name="Business" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      )} */}
+      
+    </div>
+  );
+};
+
+export default GraphInsights;
+
+

package/src/components/IpRiskAnalysisDisplay.tsx

@@ -20,7 +20,7 @@ const FindingRow = ({ finding }: { finding: IpRiskAnalysisFinding }) => (
 );
 
 const Section = ({ section }: { section: IpRiskSection }) => (
-  <div className="py-3">
+  <div className="">
     <h4 className="text-lg font-semibold mb-2" style={{ color: 'var(--text-main)' }}>{section.title}</h4>
     <ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
       {section.items.map((item, idx) => (
@@ -52,7 +52,7 @@ const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) =
 
   if (sections) {
     return (
-      <div className="mt-2 divide-y" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+      <div className="">
         <Section section={sections.general} />
         <Section section={sections.location} />
         <Section section={sections.reputational} />
@@ -61,8 +61,8 @@ const IpRiskAnalysisDisplay = ({ ipRiskAnalysis }: IpRiskAnalysisDisplayProps) =
   }
 
   return (
-    <div className="mt-6">
-      <div className="divide-y" style={{ borderColor: 'var(--icon-button-secondary)' }}>
+    <div className="">
+      <div>
         {findings.map((finding, index) => (
           <FindingRow key={index} finding={finding} />
         ))}

package/src/components/ReportHeader.tsx

@@ -1,11 +1,16 @@
 'use client';
 
 import Image from 'next/image';
+import countriesLib from 'i18n-iso-countries';
+import enLocale from 'i18n-iso-countries/langs/en.json';
+
+// Register English locale once at module import time
+countriesLib.registerLocale(enLocale);
 
 const getBadgeImageUrl = (score: number) => {
-  if (score >= 75) return '/badgegreen.png';
-  if (score >= 50) return '/badgeyellow.png';
-  return '/badgered.png';
+  if (score >= 75) return '/badgegreen2.png';
+  if (score >= 50) return '/badgeyellow2.png';
+  return '/badgered2.png';
 };
 
 const hexToRgba = (hex: string, alpha: number) => {
@@ -29,52 +34,80 @@ interface ReportHeaderProps {
     score?: number | undefined;
     isPublic: boolean;
     badgeImageUrl: string;
+    summary?: string;
+    countries?: string[];
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic, badgeImageUrl }: ReportHeaderProps) => {
-    // Use the dynamic image if available, otherwise fall back to the score-based one.
-    const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
-    const tint = hexToRgba(pickTint(score || 0), 0.06);
-    
-    const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    }) : 'N/A';
-
-    return (
-        <div
-          className={'mb-8 p-6 rounded-xl shadow-lg flex flex-col md:flex-row items-start md:items-center justify-between gap-6 border'}
-          style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
-        >
-            {/* Left Section */}
-            <div className="flex items-center text-left md:text-center">
-                <Image src={finalBadgeImageUrl} alt="KYD Badge" width={100} height={100} unoptimized className='p-3'/>
-                <div className='flex flex-col items-center justify-center'>
-                    <h1 className={'font-bold text-lg'} style={{ color: 'var(--text-main)' }}>
-                      KYD Self-Check™
-                    </h1>
-                    <p className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
-                      Private Report
-                    </p>
-                </div>
-            </div>
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, countries = [] }: ReportHeaderProps) => {
+  // Use the dynamic image if available, otherwise fall back to the score-based one.
+  const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
+  const tint = hexToRgba(pickTint(score || 0), 0.06);
+  
+  const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }) : 'N/A';
 
-            {/* Middle Section */}
-            <div className="text-left md:text-center">
-                <p className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>Developer</p>
-                <p className={'font-semibold text-2xl'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</p>
+  return (
+    <div
+      className={'mb-8 p-6 rounded-xl shadow-lg border'}
+      style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
+    >
+      <div className="flex flex-col md:flex-row items-center md:items-stretch gap-6">
+        {/* Left Half: Badge Image with robust centered overlay */}
+        <div className="w-full md:w-1/3 flex items-center justify-center self-stretch">
+          <div className="relative w-full max-w-xs select-none">
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} unoptimized className='w-full h-auto pointer-events-none p-10'/>
+            {/* Centered overlay slightly lower on Y axis, responsive and readable */}
+            <div className="pointer-events-none absolute left-1/2 top-[66%] -translate-x-1/2 -translate-y-1/2">
+              <div className="font-extrabold text-black text-3xl " >
+                {Math.round(score || 0)}%
+              </div>
             </div>
+          </div>
+        </div>
 
-            {/* Right Section */}
-            <div className={'text-left text-sm space-y-1'} style={{ color: 'var(--text-secondary)' }}>
-                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Requested By:</span> {developerName || 'N/A'}</p>
-                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Organization:</span> Unaffiliated</p>
-                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Date Generated:</span> {formattedDate}</p>
-                <p><span className={'font-semibold'} style={{ color: 'var(--text-main)' }}>Report ID:</span> {badgeId ? `${badgeId.slice(0,4)}...${badgeId.slice(-4)}` : 'N/A'}</p>
+        {/* Right Half: Title, Candidate, Details and Summary section */}
+        <div className="w-full md:w-2/3">
+          <div className={'space-y-4'}>
+            <span className='flex gap-2 w-full items-end text-start justify-start'>
+              <h2 className={'text-xl font-light'} style={{ color: 'var(--text-main)' }}>KYD Candidate Report:</h2>
+              <div className={'text-xl font-bold'} style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</div>
+            </span>
+            <div className={'text-sm space-y-2'}>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Developer:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Requested By:</span> <span style={{ color: 'var(--text-main)' }}>{developerName || 'N/A'}</span></p>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Organization:</span> <span style={{ color: 'var(--text-main)' }}>Unaffiliated</span></p>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Date Generated:</span> <span style={{ color: 'var(--text-main)' }}>{formattedDate}</span></p>
+              <p><span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Report ID:</span> <span style={{ color: 'var(--text-main)' }}>{badgeId || 'N/A'}</span></p>
+              {Array.isArray(countries) && countries.length > 0 && (
+                (() => {
+                  const countryNames = countries
+                    .map(code => countriesLib.getName((code || '').toUpperCase(), 'en') || code)
+                    .filter(Boolean);
+                  return (
+                    <p>
+                      <span className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Observed Country Affiliations:</span>{' '}
+                      <span style={{ color: 'var(--text-main)' }}>{countryNames.join(', ')}</span>
+                    </p>
+                  );
+                })()
+              )}
             </div>
+            {summary && (
+              <div className={'text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
+                <div>
+                  <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Summary:</p>
+                  <p className={'text-sm'} style={{ color: 'var(--text-main)' }}>{summary}</p>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default ReportHeader; 

package/src/components/RiskCard.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import React from 'react';
+import BusinessRuleLink from './BusinessRuleLink';
+import { FiInfo } from 'react-icons/fi';
+
+type TopMover = { label?: string; uid?: string };
+
+export default function RiskCard({
+  title,
+  description,
+  percentGood = 0,
+  label,
+  topMovers,
+  topMoversTitle,
+  tooltipText,
+}: {
+  title: string;
+  description?: string;
+  percentGood?: number;
+  label?: string;
+  topMovers?: TopMover[];
+  topMoversTitle?: string;
+  tooltipText?: string;
+}) {
+  const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
+  const displayLabel = label || '';
+
+  // bar heights descending representation
+  const bars = [140, 110, 85, 60, 40];
+  let activeIndex = 0; // Default to the tallest bar (highest risk)
+  if (pctGood >= 80) {
+    activeIndex = 4;
+  } else if (pctGood >= 60) {
+    activeIndex = 3;
+  } else if (pctGood >= 40) {
+    activeIndex = 2;
+  } else if (pctGood >= 20) {
+    activeIndex = 1;
+  }
+
+  return (
+    <div
+      className={'rounded-md p-5 border flex flex-col'}
+      style={{
+        backgroundColor: 'var(--content-card-background)',
+        borderColor: 'var(--icon-button-secondary)',
+      }}
+    >
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div>
+          <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          {description ? (
+            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{description}</div>
+          ) : null}
+        </div>
+        {(tooltipText || description) && (
+          <span className={'relative inline-flex items-center group cursor-help'} style={{ color: 'var(--text-secondary)' }}>
+            <FiInfo />
+            <div className="hidden group-hover:block absolute z-30 right-0 top-full mt-2 w-80">
+              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+                <div style={{ fontWeight: 600 }}>{title}</div>
+                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {pctGood}% (higher is better)</div>
+                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
+              </div>
+            </div>
+          </span>
+        )}
+      </div>
+      <div className="flex flex-col items-center justify-center gap-1" style={{ minHeight: 250 }}>
+        <div className="relative group flex items-end justify-center gap-3">
+          {bars.map((h, i) => (
+            <div key={i} style={{ width: 36, height: h, backgroundColor: i === activeIndex ? 'var(--text-main)' : 'var(--icon-button-secondary)', borderRadius: 4 }} />
+          ))}
+          {(tooltipText || description) && (
+            <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-80">
+              <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6 }}>
+                <div style={{ fontWeight: 600 }}>{title}</div>
+                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Score: {pctGood}% (higher is better)</div>
+                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className="mt-3 text-center">
+          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{displayLabel}</div>
+        </div>
+      </div>
+      {Array.isArray(topMovers) && topMovers.length > 0 && (
+        <div className="mt-4 text-center">
+          <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{topMoversTitle || 'Top Score Movers'}</div>
+          <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+            {topMovers.map((t, idx: number) => (
+              <React.Fragment key={idx}>
+                <BusinessRuleLink uid={t?.uid} label={t?.label || ''} />
+                {idx < topMovers.length - 1 && <span className="mx-2">|</span>}
+              </React.Fragment>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+