kyd-shared-badge 0.2.26 → 0.2.28

package/src/components/AppendixTables.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
+import { SiCredly, SiFiverr } from 'react-icons/si';
 import { DomainCSVRow } from '../types';
 
 interface SanctionSource {
@@ -19,9 +21,19 @@ interface DomainSource {
 
 const PAGE_SIZE = 25;
 
+interface BusinessRuleRow {
+    provider: string;
+    category?: string;
+    label?: string;
+    likert_label?: string;
+    likert_value?: number;
+    weight?: number;
+    uid?: string;
+}
+
 interface AppendixTableProps {
-    type: 'sanctions' | 'domains';
-    sources: (string | DomainCSVRow | SanctionSource)[];
+    type: 'sanctions' | 'domains' | 'business_rules';
+    sources: (string | DomainCSVRow | SanctionSource | BusinessRuleRow)[];
     searchedAt: string;
     developerName: string;
 }
@@ -117,6 +129,28 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
     const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
     const [expanded, setExpanded] = useState<{ [k: number]: boolean }>({});
 
+    useEffect(() => {
+        const flashIfRule = () => {
+            const hash = typeof window !== 'undefined' ? window.location.hash : '';
+            if (!hash || !hash.startsWith('#rule-')) return;
+            const id = hash.slice(1);
+            const el = document.getElementById(id) as HTMLElement | null;
+            if (!el) return;
+            try {
+                el.style.scrollMarginTop = '96px';
+                el.scrollIntoView({ block: 'start', behavior: 'smooth' });
+            } catch {}
+            el.style.transition = 'background-color 300ms ease';
+            el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
+            setTimeout(() => {
+                el.style.backgroundColor = '';
+            }, 1200);
+        };
+        flashIfRule();
+        window.addEventListener('hashchange', flashIfRule);
+        return () => window.removeEventListener('hashchange', flashIfRule);
+    }, []);
+
     const formattedDate = new Date(searchedAt).toLocaleString(undefined, {
         year: 'numeric', month: 'short', day: 'numeric',
         // hour: 'numeric', minute: '2-digit',
@@ -124,28 +158,44 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
 
     const headers = type === 'sanctions' 
         ? ["Issuing Entity", "List Name", "List Searched On", "Value", "Findings"]
-        : ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"];
+        : type === 'domains'
+        ? ["Country", "Entity Type", "Entity/Domain", "Searched On", "Value", "Findings"]
+        : ["Platform", "Category", "Observation", "Imapct"];
 
     const parsedSources = type === 'sanctions' 
-        ? (sources as any[]).map((src: any) => {
+        ? (sources).map((src) => {
             if (typeof src === 'string') {
                 const parts = src.split(':');
                 return { issuingEntity: parts[0].trim(), listName: parts.slice(1).join(':').trim(), matched: false } as SanctionSource;
             }
             return src as SanctionSource;
         })
-        : (sources as DomainCSVRow[]).map(s => ({
+        : type === 'domains'
+        ? (sources as DomainCSVRow[]).map(s => ({
             country: s.Country,
             entityType: s['Entity Type'],
             entityName: s['Entity Name'],
             url: s.URL,
+        }))
+        : (sources as BusinessRuleRow[]).map(s => ({
+            provider: s.provider,
+            category: s.category || '',
+            label: s.label || '',
+            likert_label: s.likert_label || '',
+            likert_value: s.likert_value || 0,
+            weight: s.weight || 0,
+            uid: s.uid || '',
         }));
 
     const sortedParsedSources = (type === 'sanctions')
         ? (parsedSources as SanctionSource[]).slice().sort((a, b) => (b.matched === true ? 1 : 0) - (a.matched === true ? 1 : 0))
+        : type === 'business_rules'
+        ? (parsedSources as BusinessRuleRow[]).slice().sort((a, b) => (Number(b.weight || 0) - Number(a.weight || 0)))
         : parsedSources;
 
-    const visibleParsedSources = sortedParsedSources.slice(0, visibleCount);
+    const visibleParsedSources = (type === 'business_rules')
+        ? sortedParsedSources
+        : sortedParsedSources.slice(0, visibleCount);
 
     const handleLoadMore = () => {
         setVisibleCount(currentCount => currentCount + PAGE_SIZE);
@@ -161,7 +211,7 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                 <table className={'min-w-full'}>
                     <colgroup>
                         {headers.map((_, idx) => (
-                            <col key={idx} style={idx === headers.length - 1 ? { width: '45%' } : {}} />
+                            <col key={idx} style={type === 'business_rules' ? { width: `${100 / headers.length}%` } : (idx === headers.length - 1 ? { width: '50%' } : {})} />
                         ))}
                     </colgroup>
                     <thead className={''}>
@@ -189,12 +239,45 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
                                     />
                                 );
                             }
-                            return <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
+                            if (type === 'domains') {
+                                return <DomainRow key={index} source={source as DomainSource} searchedAt={formattedDate} developerName={developerName} />
+                            }
+                            const br = source as BusinessRuleRow;
+                            const anchorId = br.uid ? `rule-${br.uid}` : undefined;
+                            const ProviderIcon = ({ name }: { name?: string }) => {
+                                const n = (name || '').toLowerCase();
+                                if (n.includes('github')) return <FaGithub />;
+                                if (n.includes('gitlab')) return <FaGitlab />;
+                                if (n.includes('stack')) return <FaStackOverflow />;
+                                if (n.includes('credly')) return <SiCredly />;
+                                if (n.includes('fiverr')) return <SiFiverr />;
+                                if (n.includes('kaggle')) return <FaKaggle />;
+                                if (n.includes('google')) return <FaGoogle />;
+                                if (n.includes('linkedin')) return <FaLinkedin />;
+                                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'}>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} 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} />
+                                        </span>
+                                    </td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} style={{ color: 'var(--text-secondary)' }}>{br.category || '—'}</td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm font-medium w-1/4'} style={{ color: 'var(--text-main)' }}>{br.label || '—'}</td>
+                                    <td className={'px-4 py-4 whitespace-normal text-sm w-1/4'} style={{ color: 'var(--text-secondary)' }}>{(() => {
+                                        const weight = br.weight || 0;
+                                        if (weight > 0) return 'Positive';
+                                        if (weight < 0) return 'Negative';
+                                        return '—';
+                                    })()}</td>
+                                </tr>
+                            );
                         })}
                     </tbody>
                 </table>
             </div>
-            {parsedSources.length > PAGE_SIZE && (
+            {type !== 'business_rules' && parsedSources.length > PAGE_SIZE && (
                 <div className={'mt-4 flex items-center justify-between text-sm'} style={{ color: 'var(--text-secondary)' }}>
                     <p>
                         Showing {Math.min(visibleCount, parsedSources.length)} of {parsedSources.length} entries
@@ -214,4 +297,15 @@ const AppendixTables: React.FC<AppendixTableProps> = ({ type, sources, searchedA
     );
 };
 
-export default AppendixTables; 
+export default AppendixTables; 
+
+// deprecated SharedBadgeDisplay code, storing here for later
+{/* <div>
+    <h4 className={'text-xl font-bold mb-4'} style={{ color: 'var(--text-main)' }}>Country-specific Entity Affiliations</h4>
+    <AppendixTables
+        type="domains"
+        sources={screening_sources.risk_profile_domains || []}
+        searchedAt={updatedAt}
+        developerName={developerName || 'this developer'}
+    />
+</div> */}

package/src/components/BusinessRuleLink.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import { useBusinessRuleMeta } from './BusinessRulesContext';
+
+const BusinessRuleLink = ({ uid, label, className }: { uid?: string; label: string; className?: string }) => {
+  const href = uid ? `#rule-${uid}` : undefined;
+  const meta = useBusinessRuleMeta(uid);
+  const tooltip = meta && (meta?.category || meta?.likert_label)
+    ? `${meta.category || ''}${meta.category && meta.likert_label ? ' - ' : ''}${meta.likert_label || ''}`
+    : undefined;
+  if (!href) return <span className={className} style={{ color: 'var(--text-secondary)' }}>{label}</span>;
+  return (
+    <span className={'relative inline-flex items-center group'}>
+      <a href={href} className={className || 'underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>
+        {label}
+      </a>
+      {tooltip && (
+        <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-72">
+          <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, fontSize: 12 }}>
+            <div style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>
+              <span className='font-semibold'>{meta?.category || ''} | </span> <span>{meta?.likert_label || ''}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+};
+
+export default BusinessRuleLink;
+
+

package/src/components/BusinessRulesContext.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { createContext, useContext, useMemo } from 'react';
+import { GraphInsightsPayload } from '../types';
+
+type BusinessRuleMeta = {
+  uid?: string;
+  category?: string;
+  likert_label?: string;
+  label?: string;
+  provider?: string;
+  weight?: number;
+};
+
+type BusinessRuleIndex = Record<string, BusinessRuleMeta>;
+
+const BusinessRulesContext = createContext<BusinessRuleIndex | null>(null);
+
+export const BusinessRulesProvider = ({
+  items,
+  children,
+}: {
+  items?: GraphInsightsPayload['business_rules_all'];
+  children: React.ReactNode;
+}) => {
+  const index = useMemo<BusinessRuleIndex>(() => {
+    const map: BusinessRuleIndex = {};
+    for (const it of items || []) {
+      try {
+        const uid = String(((it as unknown) as { uid?: string })?.uid || '');
+        if (!uid) continue;
+        map[uid] = {
+          uid,
+          category: it?.category,
+          likert_label: it?.likert_label,
+          label: it?.label,
+          provider: it?.provider,
+          weight: it?.weight,
+        };
+      } catch {
+        // ignore malformed item
+      }
+    }
+    return map;
+  }, [items]);
+
+  return <BusinessRulesContext.Provider value={index}>{children}</BusinessRulesContext.Provider>;
+};
+
+export const useBusinessRuleMeta = (uid?: string): BusinessRuleMeta | undefined => {
+  const ctx = useContext(BusinessRulesContext);
+  if (!ctx || !uid) return undefined;
+  return ctx[uid];
+};
+
+

package/src/components/CategoryBars.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React from 'react';
+
+type CategoryBarsProps = {
+  title: string;
+  categories: string[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  categoryScores: Record<string, any>;
+  barColor: (percent: number) => string;
+  getCategoryTooltipCopy: (category: string) => string;
+  barHeight?: number; // px height for the filled bar
+};
+
+const CategoryBars: React.FC<CategoryBarsProps> = ({
+  title,
+  categories,
+  categoryScores,
+  getCategoryTooltipCopy,
+  barHeight = 6,
+}) => {
+  return (
+    <div className="relative flex flex-col h-full">
+      <div className="font-semibold text-xl mb-2" style={{ color: 'var(--text-main)' }}>{title}</div>
+      <div className="flex-1 flex flex-col justify-between relative">
+        <div
+          className="absolute top-0 bottom-0 w-px"
+          style={{
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: 'var(--text-secondary, #e5e7eb)',
+          }}
+        />
+        {categories.map((category) => {
+          const score = categoryScores[category] || {};
+          const signed = Math.round(
+            Number(
+              score?.business?.percent_progress_signed ??
+                score?.combined?.percent_progress_signed ??
+                score?.business?.percent_progress ??
+                score?.combined?.percent_progress ??
+                0
+            )
+          );
+          const absPercent = Math.max(0, Math.min(Math.abs(signed), 100));
+          const isNegative = signed < 0;
+          const label =
+            signed <= -61 ? 'Strong Evidence' :
+            signed <= -21 ? 'Consistent Evidence' :
+            signed <= 19 ? 'Mixed Signals' :
+            signed <= 59 ? 'Consistent Evidence' :
+            'Strong Evidence';
+          const fillWidth = absPercent / 2; // half-bar represents 100%
+          const left = isNegative ? `calc(50% - ${fillWidth}%)` : '50%';
+          return (
+            <div key={category} className="first:pt-0">
+              <div className={'font-semibold mb-1'} style={{ color: 'var(--text-main)' }}>
+                {category}
+              </div>
+              <div className="relative group">
+                <div
+                  className="w-full rounded-full overflow-hidden relative"
+                  style={{
+                    height: barHeight,
+                    background: 'transparent',
+                    outline: '1px solid var(--icon-button-secondary)',
+                  }}
+                >
+                  {/* signed fill originating from center */}
+                  <div className="absolute top-0 h-full" style={{ left, width: `${fillWidth}%`, backgroundColor: 'var(--bubble-foreground)' }} />
+                </div>
+                <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 }}>{category}</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{label}</div>
+                    <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>
+                      {getCategoryTooltipCopy(category)}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default CategoryBars;
+
+

package/src/components/ConnectedPlatforms.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React from 'react';
+import { FaGithub, FaGitlab, FaStackOverflow, FaLinkedin, FaGoogle, FaKaggle } from 'react-icons/fa';
+import { SiCredly, SiFiverr } from 'react-icons/si';
+
+type ConnectedAccount = {
+  name?: string;
+  url?: string | null;
+  handle?: string | null;
+  observedAt?: string | null;
+};
+
+const ProviderIcon = ({ name }: { name?: string }) => {
+  const n = (name || '').toLowerCase();
+  if (n.includes('github')) return <FaGithub />;
+  if (n.includes('gitlab')) return <FaGitlab />;
+  if (n.includes('stack')) return <FaStackOverflow />;
+  if (n.includes('credly')) return <SiCredly />;
+  if (n.includes('fiverr')) return <SiFiverr />;
+  if (n.includes('kaggle')) return <FaKaggle />;
+  if (n.includes('google')) return <FaGoogle />;
+  if (n.includes('linkedin')) return <FaLinkedin />;
+  return <span className="inline-block w-4 h-4 rounded-full" style={{ backgroundColor: 'var(--icon-button-secondary)' }} />;
+};
+
+const ConnectedPlatforms = ({ accounts }: { accounts?: ConnectedAccount[] }) => {
+  const list = Array.isArray(accounts) ? accounts : [];
+  if (list.length === 0) return null;
+  return (
+    <div className="pt-8">
+      <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sources (Connected or Linked)</h4>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {list.map((acct, idx) => (
+          <div key={idx} className={'rounded-md p-3 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-3 min-w-0">
+                <div className={'text-lg'} style={{ color: 'var(--text-main)' }}>
+                  <ProviderIcon name={acct.name} />
+                </div>
+                <div className={'text-sm font-medium truncate'} style={{ color: 'var(--text-main)' }}>{acct.name}</div>
+              </div>
+              {acct.observedAt ? (
+                <div className={'text-xs whitespace-nowrap'} style={{ color: 'var(--text-secondary)' }}>
+                  <span style={{ color: 'var(--text-main)' }}>Observed At:</span> {new Date(acct.observedAt).toLocaleDateString()}
+                </div>
+              ) : <div />}
+            </div>
+            <div className={'text-xs mt-2 truncate'} style={{ color: 'var(--text-secondary)' }}>
+              {acct.url ? (
+                <a href={acct.url} target="_blank" rel="noopener noreferrer" className={'font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>
+                  {acct.handle || acct.url}
+                </a>
+              ) : (
+                <span className={'opacity-80'}>Not connected</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ConnectedPlatforms;
+
+

package/src/components/GaugeCard.tsx

@@ -0,0 +1,99 @@
+'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 GaugeCard({
+  title,
+  description,
+  percent = 0,
+  label,
+  topMovers,
+  topMoversTitle,
+  tooltipText,
+}: {
+  title: string;
+  description?: string;
+  percent?: number;
+  label?: string;
+  topMovers?: TopMover[];
+  topMoversTitle?: string;
+  tooltipText?: string;
+}) {
+  const pct = Math.max(0, Math.min(100, Math.round(Number(percent ?? 0))));
+  const displayLabel = label || '';
+  const size = 280;
+  const strokeWidth = 32;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = Math.PI * radius;
+  const progress = pct / 100;
+  const dash = circumference * progress;
+
+  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: {pct}%</div>
+                <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
+              </div>
+            </div>
+          </span>
+        )}
+      </div>
+      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 250 }}>
+        <div className="relative group" style={{ width: size, height: size / 2 }}>
+          <svg width={size} height={size / 2} viewBox={`0 0 ${size} ${size/2}`}>
+            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={'var(--icon-button-secondary)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" />
+            <path d={`M ${strokeWidth/2} ${size/2} A ${radius} ${radius} 0 0 1 ${size-strokeWidth/2} ${size/2}`} stroke={'var(--bubble-foreground)'} strokeWidth={strokeWidth} fill="none" strokeLinecap="round" strokeDasharray={`${dash},${circumference}`} />
+            <line x1={size/2} y1={size/2} x2={size/2 + radius * Math.cos(Math.PI * progress - Math.PI)} y2={size/2 + radius * Math.sin(Math.PI * progress - Math.PI)} stroke={'var(--text-main)'} strokeWidth="2" />
+          </svg>
+          {(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: {pct}%</div>
+                <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-secondary)' }}>{tooltipText || description}</div>
+              </div>
+            </div>
+          )}
+        </div>
+        <div className={'mt-3 text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{displayLabel}</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>
+  );
+}
+
+