kyd-shared-badge 0.1.2 → 0.1.4

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -30,9 +30,10 @@ interface ScoreCardProps {
   descriptor?: string;
   icon: IconType;
   scoreType: 'number' | 'risk' | 'descriptor';
+  isRecruiter?: boolean;
 }
 
-const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType }: ScoreCardProps) => {
+const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreType, isRecruiter = false }: ScoreCardProps) => {
     const scoreColor = scoreType === 'descriptor' ? 'text-neutral-400' : getScoreColor(score);
     let displayScore;
 
@@ -45,13 +46,20 @@ const ScoreCard = ({ title, score, description, descriptor, icon: Icon, scoreTyp
     }
 
     return (
-        <div className="p-6 rounded-lg flex flex-col items-center justify-start text-center dark:bg-neutral-800/50 backdrop-blur-sm bg-white/70 shadow-lg border border-neutral-200 dark:border-neutral-700 h-full">
+        <div
+          className={
+            isRecruiter
+              ? 'p-6 rounded-xl flex flex-col items-center justify-start text-center shadow h-full border'
+              : 'p-6 rounded-lg flex flex-col items-center justify-start text-center dark:bg-neutral-800/50 backdrop-blur-sm bg-white/70 shadow-lg border border-neutral-200 dark:border-neutral-700 h-full'
+          }
+          style={isRecruiter ? { backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' } : undefined}
+        >
             <div className={`text-3xl mb-4 ${scoreColor}`}>
                 <Icon />
             </div>
-            <h3 className={`font-semibold text-xl text-neutral-800 dark:text-white mb-2 ${scoreType === 'descriptor' ? 'text-neutral-400' : ''}`}>{title}</h3>
+            <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>
-            <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-4">{description}</p>
+            <p className={isRecruiter ? 'text-sm mt-4' : 'text-sm text-neutral-600 dark:text-neutral-400 mt-4'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>{description}</p>
         </div>
     );
 };
@@ -106,6 +114,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   description={devTrustScore?.description || ''}
                   icon={FiThumbsUp}
                       scoreType='number'
+                      isRecruiter={isRecruiter}
                 />
                 <ScoreCard 
                   title="KYD Risk™" 
@@ -113,6 +122,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   description={riskScore?.description || ''}
                   icon={FiShield}
                       scoreType='risk'
+                      isRecruiter={isRecruiter}
                 />
                 <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>}
@@ -121,6 +131,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                   descriptor={aiUsageScore?.descriptor}
                   icon={FiCpu}
                   scoreType='descriptor'
+                  isRecruiter={isRecruiter}
                 />
             </div>
 
@@ -214,6 +225,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                                     sources={[...(screening_sources.ofac_lists || []), ...(screening_sources.additional_watchlists || [])]}
                                     searchedAt={updatedAt}
                                     developerName={developerName || 'this developer'}
+                                    view={type}
                                 />
                             </div>
                             <div>
@@ -223,6 +235,7 @@ const SharedBadgeDisplay = ({ badgeData, type = 'individual' }: { badgeData: Pub
                                     sources={screening_sources.risk_profile_domains || []}
                                     searchedAt={updatedAt}
                                     developerName={developerName || 'this developer'}
+                                    view={type}
                                 />
                             </div>
                         </div>

package/src/components/AppendixTables.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { DomainCSVRow } from '../lib/types';
+import { DomainCSVRow } from '../types';
 
 interface SanctionSource {
     issuingEntity: string;
@@ -22,51 +22,54 @@ interface AppendixTableProps {
     sources: string[] | DomainCSVRow[];
     searchedAt: string;
     developerName: string;
+    view?: 'recruiter' | 'individual';
 }
 
-const SanctionsRow = ({ source, searchedAt, developerName }: { source: SanctionSource, searchedAt: string, developerName: string }) => (
-    <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-        <td className="px-4 py-4 whitespace-nowrap text-sm font-medium text-neutral-800 dark:text-neutral-200">
+const SanctionsRow = ({ source, searchedAt, developerName, isRecruiter }: { source: SanctionSource, searchedAt: string, developerName: string, isRecruiter: boolean }) => (
+    <tr className={isRecruiter ? 'transition-colors hover:bg-black/5' : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors'}>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-nowrap text-sm font-medium' : 'px-4 py-4 whitespace-nowrap text-sm font-medium text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>
             {source.issuingEntity}
         </td>
-        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-normal text-sm' : 'px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
             {source.listName}
         </td>
-        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-nowrap text-sm' : 'px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
             {searchedAt}
         </td>
-        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
-            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-nowrap text-sm' : 'px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
+            <span className={isRecruiter ? 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full' : 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'} style={isRecruiter ? { backgroundColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' } : undefined}>
                 Not Found
             </span>
         </td>
-        <td className="px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal">
-            No exact match for <strong>{developerName}</strong> (based on name and email) was found on this list.
+        <td className={isRecruiter ? 'px-4 py-4 text-sm whitespace-normal' : 'px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
+            No exact match for <strong style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{developerName}</strong> (based on name and email) was found on this list.
         </td>
     </tr>
 );
 
-const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource, searchedAt: string, developerName: string }) => (
-     <tr className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors">
-        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">{source.country || 'N/A'}</td>
-        <td className="px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300">{source.entityType || 'N/A'}</td>
-        <td className="px-4 py-4 whitespace-normal text-sm font-medium text-neutral-800 dark:text-neutral-200">{source.entityName || source.url}</td>
-        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">{searchedAt}</td>
-        <td className="px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300">
-            <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+const DomainRow = ({ source, searchedAt, developerName, isRecruiter }: { source: DomainSource, searchedAt: string, developerName: string, isRecruiter: boolean }) => (
+     <tr className={isRecruiter ? 'transition-colors hover:bg-black/5' : 'hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors'}>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-normal text-sm' : 'px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>{source.country || 'N/A'}</td>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-normal text-sm' : 'px-4 py-4 whitespace-normal text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>{source.entityType || 'N/A'}</td>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-normal text-sm font-medium' : 'px-4 py-4 whitespace-normal text-sm font-medium text-neutral-800 dark:text-neutral-200'} style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{source.entityName || source.url}</td>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-nowrap text-sm' : 'px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>{searchedAt}</td>
+        <td className={isRecruiter ? 'px-4 py-4 whitespace-nowrap text-sm' : 'px-4 py-4 whitespace-nowrap text-sm text-neutral-600 dark:text-neutral-300'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
+            <span className={isRecruiter ? 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full' : 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'} style={isRecruiter ? { backgroundColor: 'var(--icon-button-secondary)', color: 'var(--text-main)' } : undefined}>
                 Not Found
             </span>
         </td>
-        <td className="px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal">
-            No profile matching <strong>{developerName}</strong> (based on name and email) was found at this domain.
+        <td className={isRecruiter ? 'px-4 py-4 text-sm whitespace-normal' : 'px-4 py-4 text-sm text-neutral-600 dark:text-neutral-300 whitespace-normal'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
+            No profile matching <strong style={isRecruiter ? { color: 'var(--text-main)' } : undefined}>{developerName}</strong> (based on name and email) was found at this domain.
         </td>
     </tr>
 );
 
 
-const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName }) => {
+const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, view = 'individual' }) => {
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
 
+    const isRecruiter = view === 'recruiter';
+
     const formattedDate = new Date(searchedAt).toLocaleString(undefined, {
         year: 'numeric', month: 'short', day: 'numeric',
         hour: 'numeric', minute: '2-digit',
@@ -100,35 +103,36 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
 
     return (
         <div>
-            <div className="overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700">
-                <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
-                    <thead className="bg-neutral-50 dark:bg-neutral-800">
+            <div className={isRecruiter ? 'overflow-x-auto rounded-lg border' : 'overflow-x-auto rounded-lg border border-neutral-200 dark:border-neutral-700'} style={isRecruiter ? { borderColor: 'var(--icon-button-secondary)', backgroundColor: 'var(--content-card-background)' } : undefined}>
+                <table className={isRecruiter ? 'min-w-full' : 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'}>
+                    <thead className={isRecruiter ? '' : 'bg-neutral-50 dark:bg-neutral-800'}>
                         <tr>
                             {headers.map(header => (
-                                <th key={header} scope="col" className="px-4 py-3 text-left text-xs font-semibold text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
+                                <th key={header} scope="col" className={isRecruiter ? 'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider' : 'px-4 py-3 text-left text-xs font-semibold text-neutral-500 dark:text-neutral-300 uppercase tracking-wider'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                                     {header}
                                 </th>
                             ))}
                         </tr>
                     </thead>
-                    <tbody className="bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700">
+                    <tbody className={isRecruiter ? '' : 'bg-white dark:bg-neutral-900 divide-y divide-neutral-200 dark:divide-neutral-700'}>
                         {visibleParsedSources.map((source, index) => 
                             type === 'sanctions' 
-                            ? <SanctionsRow key={index} source={source as SanctionSource} searchedAt={formattedDate} developerName={developerName} />
-                            : <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
+                            ? <SanctionsRow key={index} source={source as SanctionSource} searchedAt={formattedDate} developerName={developerName} isRecruiter={isRecruiter} />
+                            : <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} isRecruiter={isRecruiter} />
                         )}
                     </tbody>
                 </table>
             </div>
             {parsedSources.length > PAGE_SIZE && (
-                <div className="mt-4 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400">
+                <div className={isRecruiter ? 'mt-4 flex items-center justify-between text-sm' : 'mt-4 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
                     <p>
                         Showing {Math.min(visibleCount, parsedSources.length)} of {parsedSources.length} entries
                     </p>
                     {visibleCount < parsedSources.length && (
                         <button
                             onClick={handleLoadMore}
-                            className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-md"
+                            className={isRecruiter ? 'font-medium underline-offset-2 hover:underline' : 'font-medium text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-md'}
+                            style={isRecruiter ? { color: 'var(--icon-accent)' } : undefined}
                         >
                             Load More
                         </button>

package/src/components/ReportHeader.tsx

@@ -48,7 +48,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, isPublic,
                       KYD Self-Check™
                     </h1>
                     <p className={isRecruiter ? 'text-sm' : 'text-sm text-neutral-600 dark:text-neutral-400'} style={isRecruiter ? { color: 'var(--text-secondary)' } : undefined}>
-                      {isPublic ? 'Public Report' : 'Private Report'}
+                      {(isPublic && type === 'individual') ? 'Public Report' : 'Private Report'}
                     </p>
                 </div>
             </div>