kyd-shared-badge 0.3.98 → 0.3.99

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -27,6 +27,7 @@ import UseCases from './components/UseCases';
 import SummaryCards from './components/SummaryCards';
 import GaugeCard from './components/GaugeCard';
 import RiskCard from './components/RiskCard';
+import RoleOverviewCard from './components/RoleOverviewCard';
 import TopContributingFactors from './components/TopContributingFactors';
 import AiUsageBody from './components/AiUsageBody';
 import SanctionsMatches from './components/SanctionsMatches';
@@ -226,22 +227,17 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             />
           </div>
           {/* Top-right: Role match section */}
-          <div className={'rounded-lg border p-4'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
-            <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Role Alignment</div>
+          <div>
             {(() => {
               const em = assessmentResult?.enterprise_match;
               if (!em) return <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>No role match available.</div>;
               const role = em.role || {};
               return (
-                <div className={'space-y-2'}>
-                  <div className={'flex items-center gap-2'}>
-                    <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{role?.name || 'Role'}</div>
-                    <span className={'px-2 py-0.5 rounded text-xs font-semibold'} style={{ backgroundColor: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>{em.label}</span>
-                  </div>
-                  {em.description ? (
-                    <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{em.description}</div>
-                  ) : null}
-                </div>
+                <RoleOverviewCard
+                  title={'Role Alignment'}
+                  matchLabel={em.label}
+                  roleName={role?.name || 'Role'}
+                />
               );
             })()}
           </div>

package/src/components/GaugeCard.tsx

@@ -70,6 +70,13 @@ export default function GaugeCard({
             value={pct}
             minValue={0}
             maxValue={100}
+            labels={{
+              valueLabel: {
+                // Show backend-provided label in the center instead of percent
+                formatTextValue: () => displayLabel,
+                matchColorWithArc: true,
+              },
+            }}
             arc={{
               padding: 0.02,
               // Explicit subArcs ensure left->right map: red -> yellow -> green

package/src/components/RoleOverviewCard.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
+import { clampPercent, hexToRgba, scoreToColorHex, red, yellow, green } from '../colors';
+
+export default function RoleOverviewCard({
+  title,
+  matchLabel,
+  roleName,
+}: {
+  title: string;
+  matchLabel?: string;
+  roleName?: string;
+}) {
+  const pct = useMemo(() => {
+    const raw = String(matchLabel || '').toLowerCase();
+    let mapped = 0;
+    if (raw.includes('optimal')) mapped = 100;
+    else if (raw.includes('strong')) mapped = 75;
+    else if (raw.includes('partial')) mapped = 50;
+    else if (raw.includes('weak')) mapped = 25;
+    else mapped = 0; // incompatible or unknown
+    return clampPercent(mapped);
+  }, [matchLabel]);
+
+  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
+  const displayLabel = String(matchLabel || '').trim();
+
+  const segmentLabels = [
+    'Incompatible',
+    'Weak',
+    'Partial',
+    'Strong',
+    'Optimal',
+  ];
+
+  return (
+    <div
+      className={'rounded-md p-5 border flex flex-col min-h-full'}
+      style={{
+        backgroundColor: 'var(--content-card-background)',
+        borderColor: 'var(--icon-button-secondary)',
+        backgroundImage: `linear-gradient(${headerTint}, ${headerTint})`,
+      }}
+    >
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div>
+          <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
+          {roleName ? (
+            <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{roleName}</div>
+          ) : null}
+        </div>
+      </div>
+      <div className="flex-grow flex flex-col items-center justify-center" style={{ minHeight: 200 }}>
+        <div className="relative" style={{ width: '100%', aspectRatio: '2 / 1', maxWidth: 360 }}>
+          <GaugeComponent
+            type="semicircle"
+            style={{ width: '100%', height: '100%' }}
+            value={pct}
+            minValue={0}
+            maxValue={100}
+            labels={{
+              valueLabel: {
+                formatTextValue: () => displayLabel,
+                matchColorWithArc: true,
+              },
+            }}
+            arc={{
+              padding: 0.02,
+              gradient: true,
+              colorArray: [red, yellow, green],
+            }}
+            pointer={{ type: 'arrow', elastic: true, animationDelay: 0 }}
+          />
+        </div>
+        <div className="mt-3 w-full">
+          <div className="grid grid-cols-5 text-[10px] sm:text-xs" style={{ color: 'var(--text-secondary)' }}>
+            {segmentLabels.map((label, idx) => (
+              <div key={idx} className="flex flex-col items-center">
+                <div className="h-2 w-px" style={{ background: 'var(--icon-button-secondary)' }} />
+                <div className="mt-1 whitespace-nowrap">{label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+