kyd-shared-badge 0.3.64 → 0.3.66

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -31,7 +31,6 @@ import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
 import AppendixContent from './components/AppendixContent';
 import { ProviderIcon, getProviderDisplayName, getProviderTooltipCopy, getCategoryTooltipCopy, barColor } from './utils/provider';
-import ResumeView from './components/ResumeView';
 type ChatWidgetProps = Partial<{
   api: string;
   title: string;
@@ -224,21 +223,6 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
 
 
           <div className="pt-8 space-y-8">
-        {(() => {
-          const resumeJson = (assessmentResult as any)?.resume?.json || null;
-          const roleName = (() => {
-            try { return (assessmentResult?.enterprise_match?.role?.name) || undefined; } catch { return undefined; }
-          })();
-          if (!resumeJson) return null;
-          return (
-            <Reveal headless={isHeadless}>
-              <div className={'kyd-avoid-break'}>
-                <h3 className={'text-2xl font-bold mb-3'} style={{ color: 'var(--text-main)' }}>Resume</h3>
-                <ResumeView resume={resumeJson} roleName={roleName} showDownloadButton={false} />
-              </div>
-            </Reveal>
-          );
-        })()}
             <Reveal headless={isHeadless} as={'h3'} offsetY={8} className={`text-2xl font-bold ${isHeadless ? 'kyd-break-before' : ''}`} style={{ color: 'var(--text-main)' }}>KYD Risk - Overview</Reveal>
             
             {/* Risk Graph Insights and Category Bars */}

package/src/SharedBadgeDisplay.tsx

@@ -564,11 +564,11 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             <TabNav />
             <div className={'px-2 sm:px-0 pb-2'}>
               {activeTab === 'overview' && OverviewSection()}
-              {activeTab === 'resume' && <ResumeSection />}
-              {activeTab === 'role' && <RoleFitSection />}
               {activeTab === 'technical' && TechnicalSection()}
               {activeTab === 'risk' && RiskSection()}
               {activeTab === 'ai' && AiSection()}
+              {activeTab === 'role' && <RoleFitSection />}
+              {activeTab === 'resume' && <ResumeSection />}
               {activeTab === 'appendix' && AppendixSection()}
             </div>
           </>

package/src/components/AppendixTables.tsx

@@ -5,6 +5,10 @@ import { formatLocalDate } from '../utils/date';
 import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
 import { SiCredly, SiFiverr } from 'react-icons/si';
 import { DomainCSVRow } from '../types';
+import { red, yellow, green, hexToRgba } from '../colors';
+import RiskIcon from './icons/risk';
+import CodeIcon from './icons/code';
+import AiIcon from './icons/ai';
 
 interface SanctionSource {
     issuingEntity: string;
@@ -134,6 +138,8 @@ const DomainRow = ({ source, searchedAt, developerName }: { source: DomainSource
 const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedAt, developerName, genreMapping, headless }) => {
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
     const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
+    const [sortBy, setSortBy] = useState<'pillar' | 'category' | 'label' | 'weight' | null>(null);
+    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');
 
     useEffect(() => {
         const flashIfRule = () => {
@@ -168,6 +174,27 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         ? ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"]
         : ["Platform", "KYD Pillar", "Category", "Observation", "Weight Impact"];
 
+    const sortableBusinessHeaders: Record<string, 'pillar' | 'category' | 'label' | 'weight'> = {
+        'KYD Pillar': 'pillar',
+        'Category': 'category',
+        'Observation': 'label',
+        'Weight Impact': 'weight',
+    };
+
+    const onHeaderClick = (header: string) => {
+        if (type !== 'business_rules') return;
+        const key = sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
+        if (!key) return;
+        setSortBy(prev => {
+            if (prev === key) {
+                setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
+                return prev;
+            }
+            setSortDir('asc');
+            return key;
+        });
+    };
+
     // Build quick lookup: category -> KYD Pillar (e.g., Technical or Risk)
     const categoryToPillar: Record<string, string> = (() => {
         const map: Record<string, string> = {};
@@ -214,16 +241,34 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
         ? (parsedSources as SanctionSource[]).slice().sort((a, b) => (b.matched === true ? 1 : 0) - (a.matched === true ? 1 : 0))
         : type === 'business_rules'
         ? (() => {
-            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : 2);
-            return (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice().sort((a, b) => {
-                const ap = (a as any).pillar || '';
-                const bp = (b as any).pillar || '';
-                const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
-                if (cmpPillar !== 0) return cmpPillar;
-                const ac = (a.category || '').localeCompare(b.category || '');
-                if (ac !== 0) return ac;
-                // Within same category, sort by descending weight for usefulness
-                return Number(b.weight || 0) - Number(a.weight || 0);
+            const orderForPillar = (p: string) => (p === 'Technical' ? 0 : p === 'Risk' ? 1 : p === 'AI' ? 2 : 3);
+            const items = (parsedSources as (BusinessRuleRow & { pillar?: string })[]).slice();
+            if (!sortBy) {
+                return items.sort((a, b) => {
+                    const ap = (a as any).pillar || '';
+                    const bp = (b as any).pillar || '';
+                    const cmpPillar = orderForPillar(ap) - orderForPillar(bp);
+                    if (cmpPillar !== 0) return cmpPillar;
+                    const ac = (a.category || '').localeCompare(b.category || '');
+                    if (ac !== 0) return ac;
+                    return Number(b.weight || 0) - Number(a.weight || 0);
+                });
+            }
+            return items.sort((a, b) => {
+                const dir = sortDir === 'asc' ? 1 : -1;
+                if (sortBy === 'pillar') {
+                    return dir * (orderForPillar((a as any).pillar || '') - orderForPillar((b as any).pillar || ''));
+                }
+                if (sortBy === 'category') {
+                    return dir * ((a.category || '').localeCompare(b.category || ''));
+                }
+                if (sortBy === 'label') {
+                    return dir * ((a.label || '').localeCompare(b.label || ''));
+                }
+                if (sortBy === 'weight') {
+                    return dir * (Number(a.weight || 0) - Number(b.weight || 0));
+                }
+                return 0;
             });
         })()
         : parsedSources;
@@ -251,11 +296,23 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                     </colgroup>
                     <thead className={''}>
                         <tr>
-                            {headers.map(header => (
-                                <th key={header} scope="col" className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'} style={{ color: 'var(--text-secondary)' }}>
-                                    {header}
-                                </th>
-                            ))}
+                            {headers.map(header => {
+                                const isSortable = type === 'business_rules' && Object.prototype.hasOwnProperty.call(sortableBusinessHeaders, header);
+                                const isActive = isSortable && sortBy === sortableBusinessHeaders[header as keyof typeof sortableBusinessHeaders];
+                                const arrow = isActive ? (sortDir === 'asc' ? ' ▲' : ' ▼') : '';
+                                return (
+                                    <th
+                                        key={header}
+                                        scope="col"
+                                        onClick={() => onHeaderClick(header)}
+                                        className={'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider'}
+                                        style={{ color: 'var(--text-secondary)', cursor: isSortable ? 'pointer' : 'default', userSelect: isSortable ? 'none' : 'auto' }}
+                                        aria-sort={isActive ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
+                                    >
+                                        {header}{arrow}
+                                    </th>
+                                );
+                            })}
                         </tr>
                     </thead>
                     <tbody className={''}>
@@ -280,7 +337,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                             }
                             const br = source as BusinessRuleRow & { pillar?: string };
                             const anchorId = br.uid ? `rule-${br.uid}` : undefined;
-                            const ProviderIcon = ({ name }: { name?: string }) => {
+                            const ProviderIcon = ({ name, pillar }: { name?: string, pillar?: string }) => {
                                 const n = (name || '').toLowerCase();
                                 if (n.includes('github')) return <FaGithub />;
                                 if (n.includes('gitlab')) return <FaGitlab />;
@@ -290,13 +347,29 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                 if (n.includes('kaggle')) return <FaKaggle />;
                                 if (n.includes('google')) return <FaGoogle />;
                                 if (n.includes('linkedin')) return <FaLinkedin />;
+                                const p = (pillar || '').toLowerCase();
+                                if (p === 'risk') return <RiskIcon width={28} height={28} />;
+                                if (p === 'technical') return <CodeIcon width={28} height={28} />;
+                                if (p === 'ai') return <AiIcon width={28} height={28} />;
                                 return <span className="inline-block w-8 h-8 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
                             };
                             return (
-                                <tr id={anchorId} key={index} className={'transition-colors hover:bg-black/5'}>
+                                <tr
+                                    id={anchorId}
+                                    key={index}
+                                    className={'transition-colors hover:bg-black/5'}
+                                    style={{
+                                        backgroundColor: (() => {
+                                            const w = Number(br.weight);
+                                            if (!Number.isFinite(w)) return undefined;
+                                            const hex = w > 0 ? green : w < 0 ? red : yellow;
+                                            return hexToRgba(hex, 0.06);
+                                        })(),
+                                    }}
+                                >
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>
                                         <span title={br.provider || ''} className={'inline-flex items-center text-4xl'} style={{ color: 'var(--text-main)' }}>
-                                            <ProviderIcon name={br.provider} />
+                                            <ProviderIcon name={br.provider} pillar={br.pillar} />
                                         </span>
                                     </td>
                                     <td className={'px-4 py-4 whitespace-normal text-sm'} style={{ color: 'var(--text-secondary)' }}>{br.pillar || '—'}</td>

package/src/components/charts/ChartEmptyState.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import React from 'react'
+
+export default function ChartEmptyState({ message }: { message: string }) {
+  // const width = 640
+  // const height = 180
+  // const padding = 28
+  // const gridColor = 'var(--icon-button-secondary)'
+  // const lineColor = 'var(--icon-button-secondary)'
+  // const areaColor = '#9CA3AF' // neutral-400-ish
+
+  // // A simple placeholder path
+  // const path = `M ${padding} ${height - padding - 20}
+  //              C ${padding + 80} ${height - padding - 60},
+  //                ${padding + 160} ${height - padding - 10},
+  //                ${padding + 240} ${height - padding - 50}
+  //              S ${padding + 400} ${height - padding - 30},
+  //                ${width - padding} ${height - padding - 70}
+  //              L ${width - padding} ${height - padding}
+  //              L ${padding} ${height - padding} Z`
+
+  return (
+    <div className="h-44 relative">
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="px-3 py-1.5 rounded-md border sm:text-sm text-xs" style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', color: 'var(--text-secondary)'}}>
+          {message}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+

package/src/components/charts/ChartLegend.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import React from 'react'
+
+export default function ChartLegend({ items }: { items: Array<{ label: string; color: string }> }) {
+  if (!items?.length) return null
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs mb-2" style={{ color: 'var(--text-secondary)'}}>
+      {items.map((it) => (
+        <div key={it.label} className="flex items-center gap-1.5">
+          <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: it.color }} />
+          <span>{it.label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+

package/src/components/charts/ChartTooltip.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import React from 'react'
+
+// type PayloadItem = {
+//   color?: string
+//   name?: string | number
+//   value?: number | string
+//   dataKey?: string
+// }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function ChartTooltip(props: any) {
+  const {
+    active,
+    label,
+    payload,
+    title,
+    valueLabel,
+    valueSuffix,
+    valueFormatter,
+    labelFormatter,
+  } = props || {}
+  if (!active || !payload || !payload.length) return null
+
+  const fmtLabel = () => {
+    try {
+      if (labelFormatter) return labelFormatter(label)
+      return new Date(String(label)).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    } catch {
+      return String(label)
+    }
+  }
+
+  const fmtValue = (v: number | string) => {
+    const base = valueFormatter ? valueFormatter(v) : String(v)
+    return valueSuffix ? `${base}${valueSuffix}` : base
+  }
+
+  return (
+    <div
+      className="rounded-md border shadow-sm px-3 py-2 text-xs"
+      style={{
+        background: 'var(--content-card-background)',
+        borderColor: 'var(--icon-button-secondary)',
+        color: 'var(--text-main)'
+      }}
+    >
+      <div className="mb-1">
+        {title ? (
+          <div className="font-medium" style={{ color: 'var(--text-main)'}}>{title}</div>
+        ) : null}
+        <div style={{ color: 'var(--text-secondary)' }}>{fmtLabel()}</div>
+      </div>
+      <div className="space-y-1">
+        {payload.map((item: { color?: string, name?: string | number, value?: number | string, dataKey?: string }, idx: number) => (
+          <div key={idx} className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: item.color || 'var(--icon-accent)' }} />
+              <span style={{ color: 'var(--text-secondary)'}}>{String(item.name || item.dataKey)}</span>
+            </div>
+            <div className="font-medium" style={{ color: 'var(--text-main)'}}>
+              {fmtValue(item.value ?? '')}
+            </div>
+          </div>
+        ))}
+        {valueLabel && payload.length === 1 ? (
+          <div className="flex items-center justify-between gap-3">
+            <span style={{ color: 'var(--text-secondary)'}}>{valueLabel}</span>
+            <span className="font-medium" style={{ color: 'var(--text-main)'}}>
+              {fmtValue(payload[0].value ?? '')}
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+

package/src/index.ts

@@ -4,4 +4,8 @@ export { default as PrintableBadgeDisplay } from './PrintableBadgeDisplay';
 export { default as ChatWindowStreaming } from './chat/ChatWindowStreaming';
 export { default as ChatWidget } from './chat/ChatWidget';
 export * from './utils/date';
-export { getBadgeImageUrl } from './components/ReportHeader';
+export { getBadgeImageUrl } from './components/ReportHeader';
+
+export * from './components/charts/ChartTooltip';
+export * from './components/charts/ChartEmptyState';
+export * from './components/charts/ChartLegend';

package/src/types.ts

@@ -9,6 +9,10 @@ export type Provider = {
     hoverBg: string;
     text: string;
   };
+  endpoint?: string;
+  placeholder?: string;
+  copy?: string;
+  beta?: boolean;
 };
 
 export interface PublicBadgeData {