'use client';
import { useEffect, useRef } from 'react';
import { Employee } from './EmployeesContent';
interface Props {
employees: Employee[];
onClose: () => void;
}
function exportCSV(employees: Employee[]) {
const headers = ['ID', 'Name', 'Email', 'Phone', 'Department', 'Role', 'Status', 'Employment Type', 'Date Joined', 'Salary', 'National ID', 'KRA PIN'];
const rows = employees.map(e => [
e.id, e.name, e.email, e.phone, e.dept, e.role, e.status, e.employmentType, e.joined, e.salary, e.nationalId, e.kraPin
]);
const content = [headers, ...rows].map(r => r.map(c => `"${c}"`).join(',')).join('\n');
download('employees.csv', content, 'text/csv');
}
function exportExcel(employees: Employee[]) {
const headers = ['ID', 'Name', 'Email', 'Phone', 'Department', 'Role', 'Status', 'Employment Type', 'Date Joined', 'Salary', 'National ID', 'KRA PIN'];
const rows = employees.map(e => [
e.id, e.name, e.email, e.phone, e.dept, e.role, e.status, e.employmentType, e.joined, e.salary, e.nationalId, e.kraPin
]);
const table = [headers, ...rows].map(r => r.join('\t')).join('\n');
download('employees.xls', table, 'application/vnd.ms-excel');
}
function exportWord(employees: Employee[]) {
const rows = employees.map(e => `
| ${e.id} | ${e.name} | ${e.dept} | ${e.role} |
${e.status} | ${e.salary} | ${e.joined} |
`).join('');
const html = `
Uwezo Fund - Employee Records
Uwezo Fund — Employee Records
Generated: ${new Date().toLocaleDateString()}
| ID | Name | Department | Role | Status | Salary | Date Joined |
|---|
${rows}
`;
download('employees.doc', html, 'application/msword');
}
function exportPDF(employees: Employee[]) {
const rows = employees.map(e =>
`| ${e.id} | ${e.name} | ${e.dept} | ${e.role} | ${e.status} | ${e.salary} | ${e.joined} |
`
).join('');
const html = `Employee Records
Uwezo Fund — Employee Records
Generated: ${new Date().toLocaleDateString()} | Total: ${employees.length} employees
| ID | Name | Department | Role | Status | Salary | Date Joined |
|---|
${rows}
`;
import('../../../lib/autoDownloadPdf').then(({ printHtmlInIframe }) => {
printHtmlInIframe(html, 30000).catch(() => {});
});
}
function download(filename: string, content: string, type: string) {
const blob = new Blob([content], { type });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
export default function ExportDropdown({ employees, onClose }: Props) {
const ref = useRef(null);
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [onClose]);
const options = [
{ label: 'Export as PDF', icon: 'ri-file-pdf-line', color: 'text-red-600', action: () => { exportPDF(employees); onClose(); } },
{ label: 'Export as Excel', icon: 'ri-file-excel-line', color: 'text-green-600', action: () => { exportExcel(employees); onClose(); } },
{ label: 'Export as Word', icon: 'ri-file-word-line', color: 'text-blue-600', action: () => { exportWord(employees); onClose(); } },
];
return (
{options.map(opt => (
))}