kyd-shared-badge 0.1.13 → 0.1.14

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -10,6 +10,17 @@ import AppendixTables from './components/AppendixTables';
 import ProviderInsights from './components/ProviderInsights';
 import IpRiskAnalysisDisplay from './components/IpRiskAnalysisDisplay';
 
+// Icon images from this package's public folder (will be bundled as assets)
+import RiskGreen from '../public/riskgreen.png';
+import RiskYellow from '../public/riskyellow.png';
+import RiskRed from '../public/riskred.png';
+import CodeGreen from '../public/codegreen.png';
+import CodeYellow from '../public/codeyellow.png';
+import CodeRed from '../public/codered.png';
+import AiGreen from '../public/aigreen.png';
+import AiYellow from '../public/aiyellow.png';
+import AiRed from '../public/aired.png';
+
 const getScoreColor = (score: number) => {
     if (score >= 80) return 'text-[#6A9846]';
     if (score >= 65) return 'text-[#EABE52]';
@@ -23,6 +34,31 @@ const getRiskText = (risk: number) => {
     return 'Critical Risk';
 };
 
+// Helpers to map thresholds to icon images
+const getTechnicalIconSrc = (score: number): string => {
+  if (score >= 80) return CodeGreen as unknown as string;
+  if (score >= 65) return CodeYellow as unknown as string;
+  return CodeRed as unknown as string;
+};
+
+const getRiskIconSrc = (score: number): string => {
+  if (score >= 80) return RiskGreen as unknown as string;
+  if (score >= 65) return RiskYellow as unknown as string;
+  return RiskRed as unknown as string;
+};
+
+const getAiIconSrc = (descriptor?: string): string => {
+  if (!descriptor) return AiYellow as unknown as string;
+  const d = descriptor.toLowerCase();
+  if (d.indexOf('low') !== -1 || d.indexOf('transparent') !== -1 || d.indexOf('responsible') !== -1 || d.indexOf('conservative') !== -1) {
+    return AiGreen as unknown as string;
+  }
+  if (d.indexOf('medium') !== -1 || d.indexOf('moderate') !== -1 || d.indexOf('balanced') !== -1) {
+    return AiYellow as unknown as string;
+  }
+  return AiRed as unknown as string;
+};
+
 interface ScoreCardProps {
   title: React.ReactNode;
   score: number;
@@ -31,9 +67,10 @@ interface ScoreCardProps {
   icon: IconType;
   scoreType: 'number' | 'risk' | 'descriptor';
   isRecruiter?: boolean;
+  iconImageSrc?: string; // optional image-based icon
 }
 
-const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType, isRecruiter = false }: ScoreCardProps) => {
+const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType, isRecruiter = false, iconImageSrc }: ScoreCardProps) => {
     const scoreColor = scoreType === 'descriptor' ? 'text-neutral-400' : getScoreColor(score);
     let displayScore;
 
@@ -55,7 +92,12 @@ const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreTyp
           style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
         >
             <div className={`text-3xl mb-4 ${scoreColor}`}>
-                <Icon />
+                {iconImageSrc ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img src={iconImageSrc} alt="icon" className="h-8 w-8 object-contain" />
+                ) : (
+                  <Icon />
+                )}
             </div>
             <h3 className={`font-semibold text-xl ${scoreType === 'descriptor' ? 'text-neutral-400' : ''}`} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{title}</h3>
             <p className={`text-4xl font-bold ${scoreColor}`}>{displayScore}</p>
@@ -115,6 +157,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   icon={FiThumbsUp}
                       scoreType='number'
                       isRecruiter={isRecruiter}
+                      iconImageSrc={getTechnicalIconSrc(devTrustScore?.score || 0)}
                 />
                 <ScoreCard 
                   title="KYD Risk™" 
@@ -123,6 +166,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   icon={FiShield}
                       scoreType='risk'
                       isRecruiter={isRecruiter}
+                      iconImageSrc={getRiskIconSrc(riskScore?.score || 0)}
                 />
                 <ScoreCard 
                   title={<span>KYD AI™ <span className="text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2 py-1 rounded-full align-middle">Beta</span></span>}
@@ -132,6 +176,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   icon={FiCpu}
                   scoreType='descriptor'
                   isRecruiter={isRecruiter}
+                  iconImageSrc={getAiIconSrc(aiUsageScore?.descriptor)}
                 />
             </div>
 

package/src/colors.ts

@@ -0,0 +1,26 @@
+const redColors = [
+    '#EC6662',
+    '#F1908C',
+    '#F5B7B3',
+    '#FADBDA',
+    '#FDF0EF',
+]
+
+
+const yellowColors = [
+    '#FADBDA',
+    '#F2CA8C',
+    '#F9DFB6',
+    '#FDEFDB',
+    '#FEF9F0',
+]
+
+const greenColors = [
+    '#48A08A',
+    '#7BB9AA',
+    '#A5CCC2',
+    '#D5E8E2',
+    '#EEF6F4',
+]
+
+export { redColors, yellowColors, greenColors }

package/src/components/ReportHeader.tsx

@@ -24,11 +24,9 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
     const isRecruiter = type === 'recruiter';
     
     const formattedDate = updatedAt ? new Date(updatedAt).toLocaleString(undefined, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
     }) : 'N/A';
 
     return (
@@ -63,7 +61,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
             <div className={isRecruiter ? 'text-left text-sm space-y-1' : 'text-left text-sm text-neutral-600 dark:text-neutral-400 space-y-1'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                 <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Requested By:</span> {developerName || 'N/A'}</p>
                 <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Organization:</span> Unaffiliated</p>
-                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Date Completed:</span> {formattedDate}</p>
+                <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Date Generated:</span> {formattedDate}</p>
                 <p><span className={isRecruiter ? 'font-semibold' : 'font-semibold text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>Report ID:</span> {badgeId}</p>
             </div>
         </div>

package/src/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const src: string;
+  export default src;
+}