'use client'; import { useState } from 'react'; import { initialAppraisals, initialPIPs, PIP, RATING_LABELS, ALL_EMPLOYEES } from './performanceData'; import { motion } from 'framer-motion'; const UWEZO_LOGO = 'https://storage.readdy-site.link/project_files/8353c6c3-4df0-48e3-b13e-2f6c24e6f89d/6d094512-dcbf-4464-ad6a-2cd0e9a78386_uwezo-fund-logo.png?v=507c066dfae2633b1a8385356d2c557b'; const statusColors: Record = { Active: 'bg-yellow-100 text-yellow-700', Successful: 'bg-green-100 text-green-700', Extended: 'bg-blue-100 text-blue-700', Terminated: 'bg-red-100 text-red-700', }; function downloadPIPPdf(pip: PIP) { const style = 'body{font-family:Arial,sans-serif;padding:30px;color:#333;background:#fff;}' + '.page{max-width:700px;margin:0 auto;padding:20px;border:1px solid #ccc;}' + '.header{display:flex;justify-content:center;margin-bottom:10px;}' + '.logo-img{height:70px;width:auto;object-fit:contain;}' + '.org-name{text-align:center;font-size:14pt;font-weight:bold;color:#111;letter-spacing:2px;margin-bottom:2px;}' + '.org-sub{text-align:center;font-size:9pt;color:#555;margin-bottom:2px;}' + '.org-addr{text-align:center;font-size:8pt;color:#666;line-height:1.5;margin-bottom:8px;}' + '.thick-line{border:none;border-top:2px solid #111;margin:8px 0;}' + '.doc-title{text-align:center;font-size:11pt;font-weight:bold;color:#111;text-transform:uppercase;margin:10px 0 8px;}' + '.section{margin-bottom:16px;}' + '.section-title{color:#b22698;font-weight:bold;font-size:10pt;border-bottom:1px solid #eee;padding-bottom:4px;margin-bottom:8px;}' + '.table{width:100%;border-collapse:collapse;margin:8px 0;font-size:9.5pt;}' + '.table td{padding:6px 10px;border:1px solid #ddd;}' + '.table td:first-child{background:#f9f9f9;font-weight:600;width:35%;}' + 'ol{margin:5px 0;padding-left:20px;}' + 'ol li{margin-bottom:4px;font-size:9.5pt;}' + '.badge{display:inline-block;background:#22c55e;color:#fff;padding:5px 14px;border-radius:3px;font-size:10pt;font-weight:bold;}' + '.signature-area{margin-top:30px;display:flex;justify-content:space-between;}' + '.signature-box{width:45%;}' + '.signature-line{border-top:1px solid #333;margin-top:40px;padding-top:4px;font-size:9pt;}' + '.footer-bar{background:#b22698;color:#fff;text-align:center;padding:8px 12px;font-size:8pt;font-weight:bold;margin-top:15px;}' + '.footer-bar span{margin:0 8px;}' + '.footer-note{text-align:center;font-size:7.5pt;color:#888;margin-top:10px;border-top:1px solid #ddd;padding-top:8px;}'; const html = ` PIP Document - ${pip.id}
Uwezo Fund
UWEZO FUND OVERSIGHT BOARD
SECRETARIAT
Lenrho House, 16th Floor, Standard Street, Nairobi  |  P.O. Box 42009-00100, NAIROBI
PERFORMANCE IMPROVEMENT PLAN
Date: ${new Date().toLocaleDateString('en-KE')}
Reference: ${pip.id}
EMPLOYEE INFORMATION
Employee Name${pip.employeeName}
Department${pip.dept}
Supervisor${pip.hod}
PIP DETAILS
PIP Duration${pip.duration}
Start Date${pip.startDate}
End Date${pip.endDate}
Trigger Rating${pip.triggerRating.toFixed(1)}/5
Appraisal Period${pip.appraisalPeriod}
Current Progress${pip.checkIns[pip.checkIns.length - 1]?.progress || 0}%
IMPROVEMENT AREAS
    ${pip.improvementAreas.map(area => `
  1. ${area}
    2. `).join('')}
ACTION PLAN

${pip.actionPlan}

SUCCESS METRICS

${pip.successMetrics}

STATUS

${pip.status.toUpperCase()}

This PIP has been reviewed and is currently ${pip.status}.

HR MANAGER
Uwezo Fund
${pip.hod}
Supervisor
10th Anniversary AHADI YETU KAZI KWAKO Kenya Vision 2030
Uwezo Fund HRMS v2.0.1 • ${new Date().getFullYear()} Uwezo Fund Oversight Board
`; import('../../../lib/autoDownloadPdf').then(({ printHtmlInIframe }) => { printHtmlInIframe(html, 30000).catch(() => {}); }); } export default function PIPTab() { const [pips, setPips] = useState(initialPIPs); const [expandedId, setExpandedId] = useState(pips[0]?.id || null); const [showNew, setShowNew] = useState(false); const [deptFilter, setDeptFilter] = useState('All'); const [statusFilter, setStatusFilter] = useState('All'); const [search, setSearch] = useState(''); const [newForm, setNewForm] = useState({ employeeId: '', duration: '90 days' as '30 days' | '60 days' | '90 days', improvementAreas: '', actionPlan: '', successMetrics: '', startDate: '', }); const [addCheckIn, setAddCheckIn] = useState(null); const [checkInForm, setCheckInForm] = useState({ progress: 50, notes: '' }); const lowRatingAppraisals = initialAppraisals.filter(a => a.overallRating > 0 && a.overallRating < 2.5); const bottom10Pct = initialAppraisals .filter(a => a.overallRating > 0) .sort((a, b) => a.overallRating - b.overallRating) .slice(0, Math.max(1, Math.floor(initialAppraisals.filter(a => a.overallRating > 0).length * 0.1))); const pipCandidates = [...new Map([...lowRatingAppraisals, ...bottom10Pct].map(a => [a.employeeId, a])).values()]; const DEPARTMENTS = ['All', 'Operations', 'ICT', 'Finance', 'M&E', 'HR', 'Communications']; const filtered = pips.filter(p => (deptFilter === 'All' || p.dept === deptFilter) && (statusFilter === 'All' || p.status === statusFilter) && (p.employeeName.toLowerCase().includes(search.toLowerCase()) || p.dept.toLowerCase().includes(search.toLowerCase())) ); const handleGenerateAIPIP = () => { if (!newForm.employeeId) return; const emp = ALL_EMPLOYEES.find(e => e.id === newForm.employeeId); const appraisal = initialAppraisals.find(a => a.employeeId === newForm.employeeId); if (!emp || !appraisal) return; const rating = appraisal.overallRating; const dept = emp.dept; const role = emp.position; const aiImprovementAreas = [ `Improve ${role.toLowerCase()} core competencies and technical skills relevant to ${dept} operations`, `Enhance productivity and timeliness in delivering assigned tasks and departmental targets`, `Strengthen communication and collaboration within the ${dept} team and cross-functional units`, `Demonstrate measurable improvement in quality of work outputs and adherence to SOPs`, rating < 2.0 ? `Urgently address recurring performance gaps identified during ${appraisal.period} appraisal` : `Build on ${appraisal.period} appraisal feedback to achieve consistent above-average performance`, ]; const aiActionPlan = [ `Week 1-2: Conduct skills gap assessment with HOD (${emp.hod}) and enroll in targeted training programs`, `Week 3-4: Implement daily task planning and weekly progress reporting to direct supervisor`, `Week 5-8: Participate in peer mentoring sessions and complete at least 2 knowledge-sharing workshops`, `Week 9-10: Undertake a mini-project with clear deliverables to demonstrate applied learning`, `Week 11-12: Final evaluation meeting with HOD and HR to review progress against PIP objectives`, ].join('\n'); const aiSuccessMetrics = [ `Achieve minimum performance rating of 3.0/5.0 in the next quarterly appraisal (up from ${rating.toFixed(1)})`, `Submit 100% of assigned tasks on time with zero quality complaints for 60 consecutive days`, `Complete at least one relevant professional development course with certificate submission`, `Receive positive feedback from at least 2 peers and direct supervisor on teamwork and collaboration`, `Demonstrate application of learned skills through documented process improvements or efficiency gains`, ].join('\n'); setNewForm(f => ({ ...f, improvementAreas: aiImprovementAreas.join('\n'), actionPlan: aiActionPlan, successMetrics: aiSuccessMetrics, startDate: f.startDate || new Date().toISOString().split('T')[0], })); }; const handleCreatePIP = () => { const emp = ALL_EMPLOYEES.find(e => e.id === newForm.employeeId); if (!emp || !newForm.startDate) return; const daysMap = { '30 days': 30, '60 days': 60, '90 days': 90 }; const start = new Date(newForm.startDate); const end = new Date(start); end.setDate(end.getDate() + daysMap[newForm.duration]); const appraisal = initialAppraisals.find(a => a.employeeId === newForm.employeeId); const newPIP: PIP = { id: `PIP-2026-${String(pips.length + 1).padStart(3, '0')}`, employeeId: newForm.employeeId, employeeName: emp.name, dept: emp.dept, hod: emp.hod, triggerRating: appraisal?.overallRating || 0, appraisalPeriod: 'Q1 2026', startDate: newForm.startDate, endDate: end.toISOString().split('T')[0], duration: newForm.duration, improvementAreas: newForm.improvementAreas.split('\n').filter(Boolean), actionPlan: newForm.actionPlan, successMetrics: newForm.successMetrics, status: 'Active', checkIns: [], }; setPips(prev => [newPIP, ...prev]); setShowNew(false); setNewForm({ employeeId: '', duration: '90 days', improvementAreas: '', actionPlan: '', successMetrics: '', startDate: '' }); }; const handleAddCheckIn = (pipId: string) => { setPips(prev => prev.map(p => p.id === pipId ? { ...p, checkIns: [...p.checkIns, { date: new Date().toISOString().split('T')[0], author: p.hod, progress: checkInForm.progress, notes: checkInForm.notes, }], } : p)); setAddCheckIn(null); setCheckInForm({ progress: 50, notes: '' }); }; const handleMarkSuccessful = (pipId: string) => { setPips(prev => prev.map(p => p.id === pipId ? { ...p, status: 'Successful' } : p)); const pip = pips.find(p => p.id === pipId); if (pip) downloadPIPPdf(pip); }; return (
{[ { label: 'Total PIPs', value: pips.length, icon: 'ri-alarm-warning-line', color: 'bg-yellow-50 text-yellow-600' }, { label: 'Active', value: pips.filter(p => p.status === 'Active').length, icon: 'ri-time-line', color: 'bg-orange-50 text-orange-600' }, { label: 'Successful', value: pips.filter(p => p.status === 'Successful').length, icon: 'ri-checkbox-circle-line', color: 'bg-green-50 text-green-600' }, { label: 'PIP Candidates', value: pipCandidates.length, icon: 'ri-alert-line', color: 'bg-red-50 text-red-600' }, ].map((s, i) => (
{s.value}
{s.label}
 ))}
{pipCandidates.length > 0 && (

Employees Flagged for PIP (Rating below 2.5/5 or bottom 10%)

{pipCandidates.map(a => (
{a.avatar}

{a.name}

{a.overallRating.toFixed(1)}/5 — {RATING_LABELS[Math.round(a.overallRating)] || 'Needs Improvement'}

{!pips.find(p => p.employeeId === a.employeeId && p.status === 'Active') && ( )} {pips.find(p => p.employeeId === a.employeeId && p.status === 'Active') && ( PIP Active )}
))}
)}
setSearch(e.target.value)} placeholder="Search employee..." className="bg-white border border-gray-200 rounded-lg px-4 py-2 text-sm w-44 outline-none pr-8" />
{showNew && (

Initiate New PIP

setNewForm(f => ({ ...f, startDate: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />