kyd-shared-badge 0.3.16 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/SharedBadgeDisplay.tsx

@@ -155,6 +155,12 @@ const SharedBadgeDisplay = ({ badgeData, chatProps }: { badgeData: PublicBadgeDa
             isPublic={true}
             badgeImageUrl={badgeData.badgeImageUrl || ''}
             summary={report_summary}
+            enterpriseMatch={(() => {
+              const em = assessmentResult?.enterprise_match;
+              if (!em) return null;
+              const role = em.role || {};
+              return { score: typeof em.score === 'number' ? em.score : undefined, description: em.description, roleName: role.name };
+            })()}
             countries={(assessmentResult?.screening_sources?.ip_risk_analysis?.raw_data?.countries) || []}
         />
       </Reveal>

package/src/colors.ts

@@ -64,4 +64,37 @@ const red3 = '#F5B7B3'
 const red4 = '#FADBDA'
 const red5 = '#FDF0EF'
 
-export { red1, red2, red3, red4, red5 }
+export { red1, red2, red3, red4, red5 }
+
+
+
+export function clampPercent(value?: number): number {
+    const n = Math.round(Number(value ?? 0))
+    if (Number.isNaN(n)) return 0
+    return Math.max(0, Math.min(100, n))
+  }
+  
+  export function scoreToColorHex(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return red
+    if (pct <= 66) return yellow
+    return green
+  }
+  
+  export function scoreToCssVar(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return `var(--status-negative, ${red})`
+    if (pct <= 66) return `var(--status-neutral, ${yellow})`
+    return `var(--status-positive, ${green})`
+  }
+  
+  export function hexToRgba(hex: string, alpha: number): string {
+    const clean = hex.replace('#', '')
+    const r = parseInt(clean.substring(0, 2), 16)
+    const g = parseInt(clean.substring(2, 4), 16)
+    const b = parseInt(clean.substring(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+  
+  
+  

package/src/components/GaugeCard.tsx

@@ -3,23 +3,11 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
-const hexToRgba = (hex: string, alpha: number) => {
-  const clean = hex.replace('#', '');
-  const r = parseInt(clean.substring(0, 2), 16);
-  const g = parseInt(clean.substring(2, 4), 16);
-  const b = parseInt(clean.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const pickTint = (score: number) => {
-  if (score >= 75) return green;
-  if (score >= 50) return yellow;
-  return red;
-};
+// color helpers moved to ../utils/color
 
 export default function GaugeCard({
   title,
@@ -38,7 +26,7 @@ export default function GaugeCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pct = Math.max(0, Math.min(100, Math.round(Number(percent ?? 0))));
+  const pct = clampPercent(percent);
   const displayLabel = label || '';
   // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
   const size = 280;
@@ -47,13 +35,8 @@ export default function GaugeCard({
   const circumference = Math.PI * radius;
   const progress = pct / 100;
   const dash = circumference * progress;
-  const progressColor =
-    pct <= 33
-      ? `var(--status-negative, ${red})`
-      : pct <= 66
-      ? `var(--status-neutral, ${yellow})`
-      : `var(--status-positive, ${green})`;
-  const headerTint = hexToRgba(pickTint(pct), 0.06);
+  const progressColor = scoreToCssVar(pct);
+  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
   return (
     <div

package/src/components/ReportHeader.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import { formatLocalDate } from '../utils/date';
 import countriesLib from 'i18n-iso-countries';
 import enLocale from 'i18n-iso-countries/langs/en.json';
+import { FiInfo } from 'react-icons/fi';
 
 // Register English locale once at module import time
 countriesLib.registerLocale(enLocale);
@@ -36,13 +37,16 @@ interface ReportHeaderProps {
     isPublic: boolean;
     badgeImageUrl: string;
     summary?: string;
+    enterpriseMatch?: { score?: number; description?: string; roleName?: string } | null;
     countries?: string[];
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, countries = [] }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, 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 matchScore = typeof enterpriseMatch?.score === 'number' ? enterpriseMatch.score : undefined;
+  const matchTint = matchScore !== undefined ? hexToRgba(pickTint(matchScore), 0.06) : undefined;
   
   const formattedDate = updatedAt ? formatLocalDate(updatedAt, {
     year: 'numeric',
@@ -59,7 +63,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
         {/* 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'/>
+            <Image src={finalBadgeImageUrl} alt="KYD Badge" width={400} height={400} priority 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 " >
@@ -96,7 +100,32 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                 })()
               )}
             </div>
-            {summary && (
+            {(enterpriseMatch?.description || enterpriseMatch?.score !== undefined) ? (
+              <div className={'hidden md:block text-sm space-y-2 pt-4'} style={{ borderTop: '1px solid var(--icon-button-secondary)' }}>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <p className={'font-semibold'} style={{ color: 'var(--text-secondary)' }}>Role Match{enterpriseMatch?.roleName ? ` — ${enterpriseMatch.roleName}` : ''}</p>
+                    <span className={'relative inline-flex items-center group'} style={{ color: 'var(--text-secondary)' }}>
+                      <FiInfo size={16} />
+                      <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 }}>AI-generated</div>
+                          <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>Role match score and description are AI-generated.</div>
+                        </div>
+                      </div>
+                    </span>
+                  </div>
+                  {typeof enterpriseMatch?.score === 'number' && (
+                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', backgroundImage: matchTint ? `linear-gradient(${matchTint}, ${matchTint})` : undefined, border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+                      {Math.round(enterpriseMatch.score)}%
+                    </span>
+                  )}
+                </div>
+                {enterpriseMatch?.description && (
+                  <p className={'text-sm'} style={{ color: 'var(--text-main)' }}>{enterpriseMatch.description}</p>
+                )}
+              </div>
+            ) : summary && (
               <div className={'hidden md:block 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>

package/src/components/RiskCard.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { clampPercent, hexToRgba, scoreToColorHex } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -24,32 +24,15 @@ export default function RiskCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
+  const pctGood = clampPercent(percentGood);
   const displayLabel = label || '';
 
-  const hexToRgba = (hex: string, alpha: number) => {
-    const clean = hex.replace('#', '');
-    const r = parseInt(clean.substring(0, 2), 16);
-    const g = parseInt(clean.substring(2, 4), 16);
-    const b = parseInt(clean.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  };
+  // Background tint uses same thresholds as GaugeCard via scoreToColorHex
 
-  const pickTint = (score: number) => {
-    if (score >= 75) return green;
-    if (score >= 50) return yellow;
-    return red;
-  };
+  // Foreground bar color uses same thresholds as GaugeCard based on overall score
+  const activeColor = scoreToColorHex(pctGood);
 
-  // color bands by bar position (tallest -> lowest)
-  // indices 4 and 3 (highest bars) => red, index 2 => yellow, indices 1 and 0 => green
-  const colorForIndex = (index: number) => {
-    if (index >= 3) return red;
-    if (index === 2) return yellow;
-    return green;
-  };
-
-  const headerTint = hexToRgba(pickTint(pctGood), 0.06);
+  const headerTint = hexToRgba(scoreToColorHex(pctGood), 0.06);
 
   // bar heights ascending representation
   const bars = [40, 60, 85, 110, 140];
@@ -101,7 +84,7 @@ export default function RiskCard({
               style={{
                 width: 36,
                 height: h,
-                backgroundColor: i === activeIndex ? colorForIndex(i) : 'var(--icon-button-secondary)',
+                backgroundColor: i === activeIndex ? activeColor : 'var(--icon-button-secondary)',
                 borderRadius: 4,
               }}
             />

package/src/types.ts

@@ -154,6 +154,15 @@ export interface FBIWantedMatch {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   raw_result: any;
 }
+export interface EnterpriseMatch {
+  role: {
+    name: string;
+    description: string;
+  };
+  score: number;
+  description: string;
+}
+
 
 export interface AssessmentResult {
   final_percent: number;
@@ -225,8 +234,8 @@ export interface AssessmentResult {
   skills_matrix?: SkillsMatrix;
   skills_all?: SkillsAll;
   graph_insights?: GraphInsightsPayload;
+  enterprise_match?: EnterpriseMatch;
 }
-
 export interface ClientMetadata {
   ipAddress: string;
   userAgent: string;

package/src/utils/date.ts

@@ -1,68 +0,0 @@
-export type DateLike = string | number | Date | null | undefined;
-
-const hasTimezoneDesignator = (value: string): boolean => {
-  return /[zZ]$/.test(value) || /[+-]\d{2}:?\d{2}$/.test(value);
-};
-
-const truncateExcessFraction = (value: string): string => {
-  // Keep at most 3 fractional digits for milliseconds
-  return value.replace(/(\.\d{3})\d+/, '$1');
-};
-
-export const parseUtcDate = (input: DateLike): Date => {
-  if (input == null) return new Date(Number.NaN);
-  if (input instanceof Date) return new Date(input.getTime());
-  if (typeof input === 'number') {
-    const millis = input < 1e12 ? input * 1000 : input;
-    return new Date(millis);
-  }
-
-  const raw = String(input).trim();
-  if (!raw) return new Date(Number.NaN);
-
-  // Numeric strings (epoch seconds or millis)
-  if (/^\d{10}$/.test(raw)) return new Date(Number(raw) * 1000);
-  if (/^\d{13}$/.test(raw)) return new Date(Number(raw));
-
-  // Already has timezone; trust the browser parser
-  if (hasTimezoneDesignator(raw)) return new Date(raw);
-
-  // Normalize common forms: "YYYY-MM-DD HH:MM:SS[.fff...]" -> ISO-like
-  let norm = raw.replace(' ', 'T');
-  norm = truncateExcessFraction(norm);
-
-  // Date-only string -> treat as UTC midnight
-  if (/^\d{4}-\d{2}-\d{2}$/.test(norm)) {
-    return new Date(`${norm}T00:00:00Z`);
-  }
-
-  // If ISO-like without timezone, explicitly mark as UTC
-  if (/^\d{4}-\d{2}-\d{2}T/.test(norm) && !hasTimezoneDesignator(norm)) {
-    return new Date(`${norm}Z`);
-  }
-
-  // Fallback to native parsing
-  return new Date(norm);
-};
-
-export const formatLocalDate = (value: DateLike, options?: Intl.DateTimeFormatOptions): string => {
-  const d = value instanceof Date ? value : parseUtcDate(value);
-  if (Number.isNaN(d.getTime())) return 'N/A';
-  return d.toLocaleDateString(undefined, options);
-};
-
-export const formatLocalDateTime = (value: DateLike, options?: Intl.DateTimeFormatOptions): string => {
-  const d = value instanceof Date ? value : parseUtcDate(value);
-  if (Number.isNaN(d.getTime())) return 'N/A';
-  const base: Intl.DateTimeFormatOptions = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    timeZoneName: 'short',
-  };
-  return d.toLocaleString(undefined, { ...base, ...(options || {}) });
-};
-
-