kyd-shared-badge 0.3.63 → 0.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.63",
+  "version": "0.3.65",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -23,6 +23,7 @@
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "ai": "5.0.47",
     "i18n-iso-countries": "^7.14.0",
+    "next-auth": "^4.24.11",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",
     "recharts": "^2.15.4",

package/src/SharedBadgeDisplay.tsx

@@ -348,7 +348,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
             resume={resumeJson}
             roleName={roleName}
             badgeId={badgeId}
-            isPublic={true}
+            isPublic={badgeData.isPublic}
             showDownloadButton={true}
           />
         </div>

package/src/components/ResumeView.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
+import { Spinner } from './spinner';
+import { useSession } from 'next-auth/react';
 
 type ResumeJSON = Partial<{
   header: Partial<{ name: string; title: string; contact: Partial<{ email: string; phone: string; location: string; links: string[] }> }>;
@@ -18,7 +20,6 @@ interface ResumeViewProps {
   roleName?: string;
   badgeId?: string;
   isPublic?: boolean;
-  idToken?: string;
   showDownloadButton?: boolean;
 }
 
@@ -38,8 +39,9 @@ const Row = ({ label, value }: { label: string; value?: string }) => {
   );
 };
 
-export default function ResumeView({ resume, roleName, badgeId, isPublic, idToken, showDownloadButton }: ResumeViewProps) {
+export default function ResumeView({ resume, roleName, badgeId, isPublic, showDownloadButton }: ResumeViewProps) {
   const [isDownloading, setIsDownloading] = useState(false);
+  const { data: session } = useSession();
 
   const header = resume?.header || {};
   const contact = header?.contact || {} as any;
@@ -59,6 +61,7 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, idToke
       const apiGatewayUrl = process.env.NEXT_PUBLIC_API_GATEWAY_URL;
       if (!apiGatewayUrl) throw new Error('API not configured');
       const usePublic = !!isPublic;
+      const idToken = (session as any)?.id_token;
       const path = usePublic ? `/share/badge/${badgeId}/resume` : `/user/assessment/${badgeId}/resume`;
       const res = await fetch(`${apiGatewayUrl}${path}`, {
         method: 'GET',
@@ -98,7 +101,7 @@ export default function ResumeView({ resume, roleName, badgeId, isPublic, idToke
             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)'}
+            {isDownloading ? <Spinner /> : 'Download Resume (.docx)'}
           </button>
         ) : null}
       </div>

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/components/spinner.tsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react'
+
+export function Spinner() {
+  return (
+    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--icon-accent-hover)]"></div>
+  )
+}
+
+export default Spinner
+
+

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';