70 lines
2.4 KiB
JavaScript
70 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import { ShieldCheck } from 'lucide-react';
|
|
|
|
const ITEMS = [
|
|
'Identity',
|
|
'Food Handler',
|
|
'RBS',
|
|
'Allergens',
|
|
'Knife Skills',
|
|
'References',
|
|
'AI Interview',
|
|
'Background Check',
|
|
];
|
|
|
|
export default function CareerPassport({ profile }) {
|
|
const certs = (profile.certifications || []).map((c) => c.toLowerCase());
|
|
const skills = (profile.skills || []).map((s) => s.toLowerCase());
|
|
const badges = (profile.earned_badges || []).map((b) => (b.name || '').toLowerCase());
|
|
|
|
const has = (label) => {
|
|
switch (label) {
|
|
case 'Identity':
|
|
return !!profile.selfie_url || !!profile.full_name;
|
|
case 'Food Handler':
|
|
return certs.some((c) => c.includes('food'));
|
|
case 'RBS':
|
|
return certs.some((c) => c.includes('rbs'));
|
|
case 'Allergens':
|
|
return certs.some((c) => c.includes('allergen'));
|
|
case 'Knife Skills':
|
|
return skills.some((s) => s.includes('knife')) || badges.some((b) => b.includes('knife'));
|
|
case 'References':
|
|
return (profile.experience || []).length >= 2;
|
|
case 'AI Interview':
|
|
return (profile.ai_interview_score || 0) > 0;
|
|
case 'Background Check':
|
|
return (profile.shifts_completed || 0) >= 10;
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const done = ITEMS.filter(has);
|
|
const pct = Math.round((done.length / ITEMS.length) * 100);
|
|
|
|
return (
|
|
<section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-[15px] font-semibold text-[#0F172A]">Career Passport</h2>
|
|
<span className="text-[12px] font-semibold text-[#0838E0]">{pct}% Complete</span>
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
|
|
{ITEMS.map((label) => {
|
|
const ok = has(label);
|
|
return (
|
|
<div
|
|
key={label}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-xl border ${
|
|
ok ? 'border-[#BBF7D0] bg-[#F0FDF4]' : 'border-[#E5E7EB] bg-[#F8FAFC]'
|
|
}`}
|
|
>
|
|
<ShieldCheck className={`w-4 h-4 shrink-0 ${ok ? 'text-[#16A34A]' : 'text-[#CBD5E1]'}`} />
|
|
<span className={`text-[13px] ${ok ? 'text-[#0F172A] font-medium' : 'text-[#94A3B8]'}`}>{label}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |