'use client'; import { useState } from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, LineChart, Line, Legend } from 'recharts'; import { LeaveRequest, LEAVE_POLICIES, EMPLOYEES } from './leaveData'; interface Props { requests: LeaveRequest[]; } export default function LeaveReportsTab({ requests }: Props) { const [activeReport, setActiveReport] = useState(null); const byType = LEAVE_POLICIES.map(p => ({ name: p.label.replace(' Leave', ''), count: requests.filter(r => r.type === p.type && r.status === 'Approved').length, days: requests.filter(r => r.type === p.type && r.status === 'Approved').reduce((a, r) => a + r.days, 0), fill: p.color, })).filter(d => d.count > 0); const byDept = ['IT', 'HR', 'Finance', 'Operations'].map(dept => ({ dept, approved: requests.filter(r => r.dept === dept && r.status === 'Approved').length, pending: requests.filter(r => r.dept === dept && r.status === 'Pending').length, rejected: requests.filter(r => r.dept === dept && r.status === 'Rejected').length, })); const monthlyTrend = [ { month: 'Jan', total: 4, sick: 2, annual: 1 }, { month: 'Feb', total: 6, sick: 3, annual: 2 }, { month: 'Mar', total: 8, sick: 2, annual: 4 }, { month: 'Apr', total: 12, sick: 3, annual: 6 }, { month: 'May', total: 5, sick: 1, annual: 3 }, { month: 'Jun', total: 9, sick: 2, annual: 5 }, ]; const totalApproved = requests.filter(r => r.status === 'Approved').length; const totalDays = requests.filter(r => r.status === 'Approved').reduce((a, r) => a + r.days, 0); const pendingCount = requests.filter(r => r.status === 'Pending').length; const reports = [ { id: 'liability', name: 'Leave Liability Report', desc: 'Accrued but unused leave in monetary value', icon: 'ri-money-dollar-circle-line', color: '#b828a0' }, { id: 'absenteeism', name: 'Absenteeism Report', desc: 'Sick leave frequency per employee', icon: 'ri-user-unfollow-line', color: '#ef4444' }, { id: 'balance_summary', name: 'Leave Balance Summary', desc: 'Balance summary by department', icon: 'ri-wallet-3-line', color: '#3b82f6' }, { id: 'utilization', name: 'Leave Utilization Report', desc: 'Leave taken vs entitlement per employee', icon: 'ri-bar-chart-line', color: '#10b981' }, { id: 'pending', name: 'Pending Approvals Report', desc: 'All requests awaiting HR approval', icon: 'ri-time-line', color: '#f59e0b' }, ]; const liabilityData = [ { name: 'Jane Mwangi', dept: 'HR', unused: 12, rate: 3800 }, { name: 'Peter Otieno', dept: 'IT', unused: 16, rate: 4200 }, { name: 'Grace Wanjiku', dept: 'Finance', unused: 7, rate: 3500 }, { name: 'Samuel Kipchoge', dept: 'Operations', unused: 14, rate: 3200 }, { name: 'Alice Odhiambo', dept: 'IT', unused: 21, rate: 3900 }, { name: 'Linda Wambui', dept: 'Finance', unused: 17, rate: 4500 }, ]; const sickFreq = EMPLOYEES.map(emp => ({ name: emp.name.split(' ')[0], count: requests.filter(r => r.employee === emp.name && r.type === 'Sick' && r.status === 'Approved').length, })).filter(e => e.count > 0).sort((a, b) => b.count - a.count); const handleDownloadPdf = async (reportId: string, title: string) => { const today = new Date().toLocaleDateString('en-KE', { day: 'numeric', month: 'long', year: 'numeric' }); const html = `${title}
Coat of Arms Uwezo Fund Logo
UWEZO FUND OVERSIGHT BOARD
${title} — Generated ${today}

This report is generated from the Uwezo Fund HRMS leave management module.

`; try { const { printHtmlInIframe } = await import('../../../lib/autoDownloadPdf'); await printHtmlInIframe(html, 30000); } catch { // fallback: silently ignore } }; const handleDownloadExcel = (reportId: string, title: string) => { const today = new Date().toISOString().split('T')[0]; const rows = [['UWEZO FUND OVERSIGHT BOARD — ' + title, 'Generated: ' + today], []]; if (reportId === 'liability') { rows.push(['Employee', 'Department', 'Unused Days', 'Daily Rate (KES)', 'Liability (KES)']); liabilityData.forEach(r => rows.push([r.name, r.dept, String(r.unused), String(r.rate), String(r.unused * r.rate)])); rows.push([], ['Total Leave Liability', '', '', '', String(liabilityData.reduce((a, r) => a + r.unused * r.rate, 0))]); } else if (reportId === 'absenteeism') { rows.push(['Employee', 'Sick Leave Occurrences']); sickFreq.forEach(r => rows.push([r.name, String(r.count)])); } else if (reportId === 'balance_summary') { rows.push(['Department', 'Approved', 'Pending', 'Rejected']); byDept.forEach(r => rows.push([r.dept, String(r.approved), String(r.pending), String(r.rejected)])); } else if (reportId === 'pending') { const pendingReqs = requests.filter(r => r.status === 'Pending'); rows.push(['ID', 'Employee', 'Department', 'Type', 'Start Date', 'End Date', 'Days']); pendingReqs.forEach(r => rows.push([r.id, r.employee, r.dept, r.type, r.startDate, r.endDate, String(r.days)])); } const csv = rows.map(row => row.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n'); const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${reportId}-report-${today}.csv`; a.click(); URL.revokeObjectURL(url); }; return (
{[ { label: 'Approved Requests', value: totalApproved, icon: 'ri-checkbox-circle-line', color: '#16a34a', bg: '#dcfce7' }, { label: 'Total Days Taken', value: totalDays, icon: 'ri-calendar-check-line', color: '#b828a0', bg: '#fdf4ff' }, { label: 'Pending Approval', value: pendingCount, icon: 'ri-time-line', color: '#d97706', bg: '#fef3c7' }, { label: 'Employees on Leave', value: requests.filter(r => r.status === 'Approved' && r.startDate <= '2026-04-16' && r.endDate >= '2026-04-16').length, icon: 'ri-user-follow-line', color: '#3b82f6', bg: '#eff6ff' }, ].map(s => (

{s.value}

{s.label}

))}

Pre-built Reports

{reports.length} reports available
{reports.map(r => (

{r.name}

{r.desc}

))}
{activeReport === 'liability' && (

Leave Liability Report

{liabilityData.map(row => ( ))}
Employee Department Unused Days Daily Rate (KES) Liability (KES)
{row.name} {row.dept} {row.unused} {row.rate.toLocaleString()} {(row.unused * row.rate).toLocaleString()}
Total Leave Liability KES {liabilityData.reduce((a, r) => a + r.unused * r.rate, 0).toLocaleString()}
)} {activeReport === 'absenteeism' && (

Absenteeism Report — Sick Leave Frequency

[`${v} occurrences`]} />
)} {activeReport === 'balance_summary' && (

Leave Balance Summary by Department

)}

Leave by Type

Distribution of approved leave requests

{byType.map((entry, i) => )} [`${v} requests`]} />

Monthly Leave Trend

Leave taken over the past 6 months

); }