323 lines
15 KiB
JavaScript
323 lines
15 KiB
JavaScript
import React from 'react';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Mail, Phone, Briefcase, Star, Award, BadgeCheck, Fingerprint, X, Calendar, UserCheck, Sparkles, Brain, MessageSquare } from 'lucide-react';
|
|
import { Image } from '@/components/ui/image';
|
|
import CareerScoreGauge from '@/components/krow/talent/CareerScoreGauge';
|
|
import ExperienceEndorsements, { verifiedExperience } from '@/components/krow/talent/ExperienceEndorsements';
|
|
import EliteTalentScore from '@/components/krow/talent/EliteTalentScore';
|
|
|
|
const PORTRAIT_PHOTOS = [
|
|
'photo-1500648767731-7d3514ad8b31',
|
|
'photo-1531123897727-8f129e1688ce',
|
|
'photo-1573496359142-b8d87734a5a2',
|
|
'photo-1487412720507-e7ab37603c6f',
|
|
'photo-1502685104226-ee3a97a2f2c8',
|
|
'photo-1544005313-94ddf0286df2',
|
|
'photo-1494790108377-be9c29b29330',
|
|
'photo-1438761681033-6461ffad8d80',
|
|
'photo-1517841905240-472988babdf9',
|
|
'photo-1463453091185-61582044d556',
|
|
];
|
|
|
|
function getPortraitSeed(name) {
|
|
let h = 0;
|
|
for (let i = 0; i < (name || '').length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
|
|
return PORTRAIT_PHOTOS[h % PORTRAIT_PHOTOS.length];
|
|
}
|
|
|
|
function getInitials(name) {
|
|
return (name || '').split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase() || '??';
|
|
}
|
|
|
|
function getKrowIdCode(profile) {
|
|
if (profile?.id) {
|
|
const hex = profile.id.replace(/[^a-f0-9]/gi, '');
|
|
if (hex.length >= 6) return hex.slice(0, 6).toUpperCase();
|
|
}
|
|
let h = 0;
|
|
const seed = profile?.full_name || 'KROW';
|
|
for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
|
|
return (h & 0xFFFFFF).toString(16).padStart(6, '0').toUpperCase();
|
|
}
|
|
|
|
function formatDate(d) {
|
|
try {
|
|
return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
|
|
} catch { return ''; }
|
|
}
|
|
|
|
const BADGE_LEVEL_STYLES = {
|
|
bronze: 'bg-[#FEF3C7] text-[#92400E] border-[#FCD34D]',
|
|
silver: 'bg-[#F3F4F6] text-[#4B5563] border-[#D1D5DB]',
|
|
gold: 'bg-[#FEF9E7] text-[#92400E] border-[#F9E547]',
|
|
platinum: 'bg-[#EEF3FE] text-[#1E40AF] border-[#BFDBFE]',
|
|
};
|
|
|
|
function Section({ label, children }) {
|
|
if (!children) return null;
|
|
return (
|
|
<div>
|
|
<p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2">{label}</p>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PillList({ items, className = 'bg-[#F0F4F8] text-[#0047AB]' }) {
|
|
if (!items || items.length === 0) return null;
|
|
return (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{items.map((it, i) => (
|
|
<span key={i} className={`px-2.5 py-1 rounded-full text-[11px] font-medium ${className}`}>{it}</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ScoreFactor({ label, value }) {
|
|
return (
|
|
<div className="inline-flex items-center justify-between gap-2 px-3 py-1.5 rounded-full border border-[#E5E7EB] bg-white">
|
|
<span className="text-[11px] text-[#6B7280] font-medium">{label}</span>
|
|
<span className="text-[12px] font-bold text-[#2563EB]">{value}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** @param {any} props */
|
|
export default function TalentDetailModal({ open, onClose, profile, onContact, onSchedule, onHire, matchScore, matchReasons }) {
|
|
if (!profile) return null;
|
|
const badges = profile.earned_badges || [];
|
|
const capabilities = (profile.capabilities || []).filter((c) => c.status === 'verified' || c.status === 'pending');
|
|
const experience = profile.experience || [];
|
|
const strengths = profile.strengths || [];
|
|
|
|
const verifiedExperienceList = verifiedExperience(profile).length > 0;
|
|
const krowCode = getKrowIdCode(profile);
|
|
const reportDate = formatDate(profile.updated_date || new Date());
|
|
const openToWork = profile.status === 'active' && (profile.availability?.length > 0 || !profile.current_position);
|
|
|
|
const reliability = Math.round(profile.reliability_score || 0);
|
|
const attendance = Math.round(profile.attendance_score || 0);
|
|
const performance = Math.round(profile.performance_score || 0);
|
|
const leadership = Math.round(profile.leadership_potential || 0);
|
|
const aiInterview = Math.round(profile.ai_interview_score || 0);
|
|
const xp = Math.round(profile.xp || 0);
|
|
|
|
const identityVerified = capabilities.length > 0 || badges.length > 0;
|
|
const identityTag = identityVerified ? 'Verified' : 'Pending';
|
|
const identityClass = identityVerified ? 'bg-[#EEF3FE] text-[#1E40AF]' : 'bg-[#FFF7ED] text-[#B45309]';
|
|
return (
|
|
<Dialog open={open} onOpenChange={(o) => !o && onClose()}>
|
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto p-0">
|
|
<DialogHeader className="sr-only">
|
|
<DialogTitle>{profile.full_name} — KROW Identity</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* KROW ID header — clean white, no blue band */}
|
|
<div className="relative p-5 sm:p-6 bg-gradient-to-b from-[#F5F7FB] to-white">
|
|
<button onClick={onClose} className="absolute top-4 right-4 text-[#9CA3AF] hover:text-[#111827]">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<div className="flex items-start gap-4">
|
|
<div className="w-16 h-16 rounded-full overflow-hidden ring-2 ring-[#E5E7EB] shrink-0 bg-[#E5E7EB] flex items-center justify-center">
|
|
{profile.selfie_url ? (
|
|
<Image
|
|
src={profile.selfie_url}
|
|
alt={profile.full_name}
|
|
className="w-full h-full object-cover"
|
|
fittingType="fill"
|
|
/>
|
|
) : (
|
|
<span className="text-[20px] font-bold text-[#1D4ED8]">{getInitials(profile.full_name)}</span>
|
|
)}
|
|
</div>
|
|
<div className="min-w-0 flex-1 pt-0.5">
|
|
<div className="inline-flex items-center gap-1.5 text-[10px] font-bold tracking-wide text-[#2563EB] uppercase">
|
|
<Fingerprint className="w-3 h-3" /> KROW ID · {krowCode}
|
|
</div>
|
|
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
|
<h2 className="text-[22px] font-bold leading-tight text-[#111827] truncate">{profile.full_name}</h2>
|
|
{identityVerified && (
|
|
<span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${identityClass}`}>{identityTag}</span>
|
|
)}
|
|
{openToWork && (
|
|
<span className="text-[12px] text-[#6B7280]">· Open to work</span>
|
|
)}
|
|
</div>
|
|
<p className="text-[11px] text-[#6B7280] mt-1">
|
|
Career Report · {reportDate}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-5 sm:px-6 pb-5 sm:pb-6 space-y-5">
|
|
{/* Quick stats banner — pill capsules, single line */}
|
|
<div className="flex flex-nowrap gap-1.5 overflow-x-auto no-scrollbar">
|
|
{profile.experience_years > 0 && (
|
|
<Stat icon={<Briefcase className="w-3 h-3" />} label="Experience" value={`${profile.experience_years} yr`} />
|
|
)}
|
|
{profile.shifts_completed > 0 && (
|
|
<Stat icon={<Briefcase className="w-3 h-3" />} label="Shifts" value={profile.shifts_completed} />
|
|
)}
|
|
{(profile.client_rating > 0 || profile.supervisor_rating > 0) && (
|
|
<Stat icon={<Star className="w-3 h-3" />} label="Rating" value={`${((profile.client_rating + profile.supervisor_rating) / 2).toFixed(1)}`} valueClass="text-[#F59E0B]" />
|
|
)}
|
|
{profile.desired_position && (
|
|
<Stat icon={<Briefcase className="w-3 h-3" />} label="Role" value={profile.desired_position} />
|
|
)}
|
|
</div>
|
|
|
|
{/* Match banner */}
|
|
{matchScore != null && (
|
|
<div className="rounded-xl border border-[#DBEAFE] bg-[#EEF3FE] p-4">
|
|
<div className="flex items-center gap-2 mb-1.5">
|
|
<Sparkles className="w-4 h-4 text-[#0838E0]" />
|
|
<span className="text-[13px] font-bold text-[#0838E0]">Match Score: {matchScore}/100</span>
|
|
</div>
|
|
{matchReasons?.length > 0 && (
|
|
<ul className="text-[12px] text-[#374151] list-disc list-inside space-y-0.5">
|
|
{matchReasons.map((r, i) => <li key={i}>{r}</li>)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Career Score */}
|
|
<div className="bg-white border border-[#E5E7EB] rounded-2xl py-7 px-4 flex flex-col items-center">
|
|
<CareerScoreGauge profile={profile} />
|
|
</div>
|
|
|
|
{/* Elite Talent scorecard — dotted-leader metric list */}
|
|
<EliteTalentScore profile={profile} />
|
|
|
|
<div className="bg-white border border-[#E5E7EB] rounded-2xl p-4 space-y-4">
|
|
<Section label="SKILLS">
|
|
<PillList items={profile.skills} />
|
|
</Section>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-3 border-t border-[#F3F4F6]">
|
|
<Section label="LANGUAGES">
|
|
<PillList items={profile.languages} />
|
|
</Section>
|
|
<Section label="AVAILABILITY">
|
|
<PillList items={profile.availability} className="bg-[#F3F4F6] text-[#374151]" />
|
|
</Section>
|
|
<Section label="CERTIFICATIONS">
|
|
<PillList items={profile.certifications} className="bg-[#F3F4F6] text-[#374151]" />
|
|
</Section>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badges */}
|
|
{badges.length > 0 && (
|
|
<Section label="BADGES">
|
|
<div className="flex flex-wrap gap-2">
|
|
{badges.map((b, i) => (
|
|
<span key={i} className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-[12px] font-medium ${BADGE_LEVEL_STYLES[b.level] || BADGE_LEVEL_STYLES.bronze}`}>
|
|
<Award className="w-3.5 h-3.5" />
|
|
{b.name}
|
|
{b.level && <span className="opacity-70 text-[10px] capitalize">· {b.level}</span>}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
|
|
{/* Endorsements / Verified Capabilities */}
|
|
{capabilities.length > 0 && (
|
|
<Section label="VERIFIED CAPABILITIES (ENDORSEMENTS)">
|
|
<div className="flex flex-wrap gap-2">
|
|
{capabilities.map((c, i) => (
|
|
<span key={i} className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12px] ${c.status === 'verified' ? 'bg-[#F0F4F8] text-[#1E56C1]' : 'bg-[#F3F4F6] text-[#6B7280]'}`}>
|
|
<BadgeCheck className="w-3.5 h-3.5" />
|
|
<span className="font-semibold">{c.skill}</span>
|
|
{c.level && <span className="text-[11px] text-[#5D759B]">· {c.level}</span>}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)}
|
|
|
|
{/* Consolidated Experience & Endorsements — jobs + client endorsements in one list */}
|
|
{verifiedExperience(profile).length > 0 && (
|
|
<Section label="EXPERIENCE & ENDORSEMENTS">
|
|
<ExperienceEndorsements profile={profile} />
|
|
</Section>
|
|
)}
|
|
|
|
{/* Personality + strengths */}
|
|
{(profile.personality || strengths.length > 0 || profile.communication_style) && (
|
|
<div className="bg-white border border-[#E5E7EB] rounded-2xl p-4 space-y-4">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{profile.personality && (
|
|
<div className="flex gap-2.5">
|
|
<span className="w-7 h-7 rounded-lg bg-[#EEF3FE] flex items-center justify-center shrink-0">
|
|
<Brain className="w-3.5 h-3.5 text-[#0838E0]" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1">PERSONALITY</p>
|
|
<p className="text-[12px] text-[#374151] leading-relaxed">{profile.personality}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{profile.communication_style && (
|
|
<div className="flex gap-2.5">
|
|
<span className="w-7 h-7 rounded-lg bg-[#EEF3FE] flex items-center justify-center shrink-0">
|
|
<MessageSquare className="w-3.5 h-3.5 text-[#0838E0]" />
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-1">COMMUNICATION STYLE</p>
|
|
<p className="text-[12px] text-[#374151] leading-relaxed">{profile.communication_style}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{strengths.length > 0 && (
|
|
<div className="pt-3 border-t border-[#F3F4F6]">
|
|
<p className="text-[10px] font-bold text-[#9CA3AF] tracking-wider mb-2">STRENGTHS</p>
|
|
<PillList items={strengths} className="bg-[#EEF3FE] text-[#0838E0]" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Contact info + actions */}
|
|
<div className="border-t border-[#E5E7EB] pt-4">
|
|
<div className="flex items-center gap-4 text-[12px] text-[#6B7280] flex-wrap mb-3">
|
|
{profile.email && <span className="inline-flex items-center gap-1"><Mail className="w-3.5 h-3.5" /> {profile.email}</span>}
|
|
{profile.phone && <span className="inline-flex items-center gap-1"><Phone className="w-3.5 h-3.5" /> {profile.phone}</span>}
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{onContact && (
|
|
<button onClick={() => onContact(profile)} className="inline-flex items-center gap-1.5 bg-[#0838E0] hover:bg-[#062BAF] text-white text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
|
|
<Mail className="w-4 h-4" /> Contact
|
|
</button>
|
|
)}
|
|
{onSchedule && (
|
|
<button onClick={() => onSchedule(profile)} className="inline-flex items-center gap-1.5 border border-[#E5E7EB] hover:bg-[#F9FAFB] text-[#374151] text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
|
|
<Calendar className="w-4 h-4" /> Schedule Interview
|
|
</button>
|
|
)}
|
|
{onHire && (
|
|
<button onClick={() => onHire(profile)} className="inline-flex items-center gap-1.5 border border-[#16A34A] text-[#16A34A] hover:bg-[#16A34A] hover:text-white text-[13px] font-medium px-4 py-2 rounded-lg transition-colors">
|
|
<UserCheck className="w-4 h-4" /> Quick Hire
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function Stat({ label, value, icon, valueClass = 'text-[#5D759B]' }) {
|
|
return (
|
|
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#F0F4F8] text-[#1E56C1] shrink-0">
|
|
{icon}
|
|
<span className="text-[11px] font-semibold">{label}</span>
|
|
<span className="text-[11px] text-[#5D759B]">·</span>
|
|
<span className={`text-[11px] font-medium truncate max-w-[90px] ${valueClass}`}>{value}</span>
|
|
</span>
|
|
);
|
|
} |