kyd-shared-badge 0.3.62 → 0.3.63

package/package.json

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

package/src/PrintableBadgeDisplay.tsx

@@ -31,6 +31,7 @@ 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;
@@ -223,6 +224,21 @@ 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

@@ -30,6 +30,7 @@ import SanctionsMatches from './components/SanctionsMatches';
 import { getCategoryTooltipCopy, barColor } from './utils/provider';
 import { matchLabelToColor } from './colors';
 import { useEffect, useMemo, useState } from 'react';
+import ResumeView from './components/ResumeView';
 type ChatWidgetProps = Partial<{
   api: string;
   title: string;
@@ -112,6 +113,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const tabs = useMemo(() => {
     const arr = [
       { key: 'overview', label: 'Overview' },
+      { key: 'resume', label: 'Resume' },
       { key: 'role', label: 'Role Fit & Coaching' },
       { key: 'technical', label: 'KYD Technical' },
       { key: 'risk', label: 'KYD Risk' },
@@ -334,6 +336,26 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
     );
   };
 
+  const ResumeSection = () => {
+    const resumeJson = (assessmentResult as any)?.resume?.json || null;
+    const roleName = (() => {
+      try { return (assessmentResult?.enterprise_match?.role?.name) || undefined; } catch { return undefined; }
+    })();
+    return (
+      <div className={`${wrapperMaxWidth} mx-auto`}>
+        <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
+          <ResumeView
+            resume={resumeJson}
+            roleName={roleName}
+            badgeId={badgeId}
+            isPublic={true}
+            showDownloadButton={true}
+          />
+        </div>
+      </div>
+    );
+  };
+
   const TechnicalSection = () => (
     <div className={`${wrapperMaxWidth} mx-auto`}>
       <div className={'rounded-xl shadow-xl p-6 sm:p-8 mt-6 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
@@ -542,6 +564,7 @@ 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()}

package/src/components/ResumeView.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+
+type ResumeJSON = Partial<{
+  header: Partial<{ name: string; title: string; contact: Partial<{ email: string; phone: string; location: string; links: string[] }> }>;
+  summary: string;
+  skills: Partial<{ categories: Array<Partial<{ name: string; items: string[] }>> }>;
+  experience: Array<Partial<{ company: string; title: string; startDate: string; endDate: string; location: string; highlights: string[]; technologies: string[] }>>;
+  projects: Array<Partial<{ name: string; description: string; impact: string; technologies: string[]; link: string }>>;
+  education: Array<Partial<{ institution: string; degree: string; graduationDate: string; location: string }>>;
+  certifications: Array<Partial<{ name: string; issuer: string; date: string }>>;
+  links: Array<Partial<{ label: string; url: string }>>;
+}>;
+
+interface ResumeViewProps {
+  resume: ResumeJSON | null | undefined;
+  roleName?: string;
+  badgeId?: string;
+  isPublic?: boolean;
+  idToken?: string;
+  showDownloadButton?: boolean;
+}
+
+function asText(value: unknown): string {
+  if (value === undefined || value === null) return '';
+  if (typeof value === 'string') return value;
+  return String(value);
+}
+
+const Row = ({ label, value }: { label: string; value?: string }) => {
+  if (!value) return null;
+  return (
+    <div className={'flex flex-col sm:flex-row sm:items-baseline gap-1'}>
+      <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{label}</div>
+      <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{value}</div>
+    </div>
+  );
+};
+
+export default function ResumeView({ resume, roleName, badgeId, isPublic, idToken, showDownloadButton }: ResumeViewProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const header = resume?.header || {};
+  const contact = header?.contact || {} as any;
+  const skills = resume?.skills || {} as any;
+  const experience = Array.isArray(resume?.experience) ? (resume?.experience as any[]) : [];
+  const projects = Array.isArray(resume?.projects) ? (resume?.projects as any[]) : [];
+  const education = Array.isArray(resume?.education) ? (resume?.education as any[]) : [];
+  const certifications = Array.isArray(resume?.certifications) ? (resume?.certifications as any[]) : [];
+  const links = Array.isArray(resume?.links) ? (resume?.links as any[]) : [];
+
+  const canDownload = !!(showDownloadButton && badgeId);
+
+  const handleDownloadResume = async () => {
+    if (!badgeId) return;
+    try {
+      setIsDownloading(true);
+      const apiGatewayUrl = process.env.NEXT_PUBLIC_API_GATEWAY_URL;
+      if (!apiGatewayUrl) throw new Error('API not configured');
+      const usePublic = !!isPublic;
+      const path = usePublic ? `/share/badge/${badgeId}/resume` : `/user/assessment/${badgeId}/resume`;
+      const res = await fetch(`${apiGatewayUrl}${path}`, {
+        method: 'GET',
+        headers: (!usePublic && idToken) ? { 'Authorization': `Bearer ${idToken}` } : {}
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data?.error || 'Unable to fetch Resume');
+      const url = data?.url;
+      if (!url) throw new Error('Missing URL');
+      if (typeof window !== 'undefined') window.location.href = url;
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('[ResumeView] Failed to download resume', e);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className={'space-y-8'}>
+      <div className={'flex items-center justify-between'}>
+        <div>
+          <div className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>{asText(header?.name) || 'Resume'}</div>
+          <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(header?.title)}</div>
+          {roleName ? (
+            <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>Role: {roleName}</div>
+          ) : null}
+          <div className={'text-sm mt-2'} style={{ color: 'var(--text-secondary)' }}>
+            {[asText(contact?.location), asText(contact?.email), asText(contact?.phone)].filter(Boolean).join(' • ')}
+          </div>
+        </div>
+        {canDownload ? (
+          <button
+            type="button"
+            onClick={handleDownloadResume}
+            disabled={isDownloading}
+            className={'px-3 py-2 text-sm rounded-md border'}
+            style={{ borderColor: 'var(--icon-button-secondary)', color: 'var(--text-main)', background: 'var(--content-card-background)' }}
+          >
+            {isDownloading ? 'Preparing…' : 'Download Resume (.docx)'}
+          </button>
+        ) : null}
+      </div>
+
+      {asText(resume?.summary) ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Summary</div>
+          <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(resume?.summary)}</div>
+        </div>
+      ) : null}
+
+      {Array.isArray(skills?.categories) && skills.categories.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Skills</div>
+          <div className={'space-y-1'}>
+            {skills.categories.map((cat: any, idx: number) => (
+              <Row key={idx} label={asText(cat?.name)} value={(Array.isArray(cat?.items) ? cat.items : []).join(', ')} />
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {experience.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Experience</div>
+          <div className={'space-y-4'}>
+            {experience.map((exp: any, idx: number) => (
+              <div key={idx} className={'space-y-1'}>
+                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>
+                  {asText(exp?.title)}{asText(exp?.company) ? ` — ${asText(exp?.company)}` : ''}
+                </div>
+                <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>
+                  {(asText(exp?.startDate) || asText(exp?.endDate)) ? `${asText(exp?.startDate)} – ${asText(exp?.endDate) || 'Present'}` : ''}
+                </div>
+                {Array.isArray(exp?.highlights) && exp.highlights.length > 0 ? (
+                  <ul className={'list-disc pl-5 text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                    {exp.highlights.map((h: any, i: number) => (
+                      <li key={i}>{asText(h)}</li>
+                    ))}
+                  </ul>
+                ) : null}
+                {Array.isArray(exp?.technologies) && exp.technologies.length > 0 ? (
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {exp.technologies.join(', ')}</div>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {projects.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Projects</div>
+          <div className={'space-y-4'}>
+            {projects.map((p: any, idx: number) => (
+              <div key={idx} className={'space-y-1'}>
+                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{asText(p?.name)}</div>
+                {asText(p?.description) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.description)}</div> : null}
+                {asText(p?.impact) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>Impact: {asText(p?.impact)}</div> : null}
+                {Array.isArray(p?.technologies) && p.technologies.length > 0 ? (
+                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {p.technologies.join(', ')}</div>
+                ) : null}
+                {asText(p?.link) ? <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.link)}</div> : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {education.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Education</div>
+          <div className={'space-y-2'}>
+            {education.map((e: any, idx: number) => (
+              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                {`${asText(e?.degree)} — ${asText(e?.institution)}${asText(e?.graduationDate) ? ` (${asText(e?.graduationDate)})` : ''}`}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {certifications.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Certifications</div>
+          <div className={'space-y-1'}>
+            {certifications.map((c: any, idx: number) => (
+              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                {`${asText(c?.name)} — ${asText(c?.issuer)}${asText(c?.date) ? ` (${asText(c?.date)})` : ''}`}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {links.length > 0 ? (
+        <div>
+          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Links</div>
+          <div className={'space-y-1'}>
+            {links.map((l: any, idx: number) => (
+              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
+                {`${asText(l?.label)}: ${asText(l?.url)}`}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+