Ra
1a9e92d7bd
- Add detailed report viewing with full-screen ReportDetail component for both company and employee reports - Fix company wiki to display onboarding Q&A in card format matching Figma designs - Exclude company owners from employee submission counts (owners contribute to wiki, not employee data) - Fix employee report generation to include company context (wiki + company report + employee answers) - Fix company report generation to use filtered employee submissions only - Add proper error handling for submission data format variations - Update Firebase functions to use gpt-4o model instead of deprecated gpt-4.1 - Fix UI syntax errors and improve report display functionality - Add comprehensive logging for debugging report generation flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
527 lines
28 KiB
TypeScript
527 lines
28 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useOrg } from '../contexts/OrgContext';
|
|
import { Card, Button } from '../components/UiKit';
|
|
import { CompanyReport, Employee, Report } from '../types';
|
|
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
|
import ScoreBarList from '../components/charts/ScoreBarList';
|
|
import { SAMPLE_COMPANY_REPORT } from '../constants';
|
|
import ReportDetail from './ReportDetail';
|
|
|
|
interface EmployeeDataProps {
|
|
mode: 'submissions' | 'reports';
|
|
}
|
|
|
|
const CompanyReportCard: React.FC<{ report: CompanyReport }> = ({ report }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
return (
|
|
<Card className="mb-6 border-l-4 border-blue-500">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
|
ZM
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-[--text-primary]">Company Report</h2>
|
|
<p className="text-sm text-[--text-secondary]">
|
|
Last updated: {new Date(report.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
{isExpanded ? 'Collapse' : 'View Details'}
|
|
</Button>
|
|
<Button size="sm">Download as PDF</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overview Section - Always Visible */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
|
<div className="bg-[--background-tertiary] p-4 rounded-lg">
|
|
<h3 className="text-sm font-medium text-[--text-secondary]">Total Employees</h3>
|
|
<p className="text-2xl font-bold text-[--text-primary]">{report.overview.totalEmployees}</p>
|
|
</div>
|
|
<div className="bg-[--background-tertiary] p-4 rounded-lg">
|
|
<h3 className="text-sm font-medium text-[--text-secondary]">Departments</h3>
|
|
<p className="text-2xl font-bold text-[--text-primary]">{report.overview.departmentBreakdown.length}</p>
|
|
</div>
|
|
<div className="bg-[--background-tertiary] p-4 rounded-lg">
|
|
<h3 className="text-sm font-medium text-[--text-secondary]">Avg Performance</h3>
|
|
<p className="text-2xl font-bold text-[--text-primary]">{report.overview.averagePerformanceScore}/5</p>
|
|
</div>
|
|
<div className="bg-[--background-tertiary] p-4 rounded-lg">
|
|
<h3 className="text-sm font-medium text-[--text-secondary]">Risk Level</h3>
|
|
<p className="text-2xl font-bold text-[--text-primary]">{report.overview.riskLevel}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{isExpanded && (
|
|
<div className="mt-6 space-y-6">
|
|
{/* Key Personnel Changes */}
|
|
{report.keyPersonnelChanges && report.keyPersonnelChanges.length > 0 && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-orange-500 rounded-full mr-2"></span>
|
|
Key Personnel Changes
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{report.keyPersonnelChanges.map((change, idx) => (
|
|
<div key={idx} className="p-3 bg-[--background-tertiary] rounded-lg">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<p className="font-medium text-[--text-primary]">{change.employeeName}</p>
|
|
<p className="text-sm text-[--text-secondary]">{change.role} - {change.department}</p>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs rounded-full ${change.changeType === 'departure' ? 'bg-red-100 text-red-800' :
|
|
change.changeType === 'promotion' ? 'bg-green-100 text-green-800' :
|
|
'bg-blue-100 text-blue-800'
|
|
}`}>
|
|
{change.changeType}
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[--text-secondary] mt-2">{change.impact}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Immediate Hiring Needs */}
|
|
{report.immediateHiringNeeds && report.immediateHiringNeeds.length > 0 && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
|
|
Immediate Hiring Needs
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{report.immediateHiringNeeds.map((need, idx) => (
|
|
<div key={idx} className="p-4 bg-[--background-tertiary] rounded-lg">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<h4 className="font-medium text-[--text-primary]">{need.role}</h4>
|
|
<span className={`px-2 py-1 text-xs rounded-full ${need.urgency === 'high' ? 'bg-red-100 text-red-800' :
|
|
need.urgency === 'medium' ? 'bg-yellow-100 text-yellow-800' :
|
|
'bg-green-100 text-green-800'
|
|
}`}>
|
|
{need.urgency} priority
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-[--text-secondary] mb-2">{need.department}</p>
|
|
<p className="text-sm text-[--text-secondary]">{need.reason}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Forward Operating Plan */}
|
|
{report.forwardOperatingPlan && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>
|
|
Forward Operating Plan
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Next Quarter Goals</h4>
|
|
<ul className="space-y-1">
|
|
{report.forwardOperatingPlan.nextQuarterGoals.map((goal, idx) => (
|
|
<li key={idx} className="text-sm text-[--text-secondary] flex items-start">
|
|
<span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-2 flex-shrink-0"></span>
|
|
{goal}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Key Initiatives</h4>
|
|
<ul className="space-y-1">
|
|
{report.forwardOperatingPlan.keyInitiatives.map((initiative, idx) => (
|
|
<li key={idx} className="text-sm text-[--text-secondary] flex items-start">
|
|
<span className="w-1.5 h-1.5 bg-green-500 rounded-full mt-2 mr-2 flex-shrink-0"></span>
|
|
{initiative}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Organizational Strengths */}
|
|
{report.organizationalStrengths && report.organizationalStrengths.length > 0 && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
|
Organizational Strengths
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{report.organizationalStrengths.map((strength, idx) => (
|
|
<div key={idx} className="p-3 bg-[--background-tertiary] rounded-lg">
|
|
<div className="flex items-start space-x-3">
|
|
<span className="text-2xl">{strength.icon}</span>
|
|
<div>
|
|
<h4 className="font-medium text-[--text-primary]">{strength.area}</h4>
|
|
<p className="text-sm text-[--text-secondary]">{strength.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Organizational Impact Summary */}
|
|
{report.organizationalImpactSummary && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-purple-500 rounded-full mr-2"></span>
|
|
Organizational Impact Summary
|
|
</h3>
|
|
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
|
<p className="text-[--text-secondary] text-sm leading-relaxed">
|
|
{report.organizationalImpactSummary}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Grading Overview */}
|
|
{report.gradingOverview && (
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3 flex items-center">
|
|
<span className="w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
|
|
Grading Overview
|
|
</h3>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{Object.entries(report.gradingOverview).map(([category, score], idx) => (
|
|
<div key={idx} className="text-center p-4 bg-[--background-tertiary] rounded-lg">
|
|
<div className="text-2xl font-bold text-[--text-primary] mb-1">{score}/5</div>
|
|
<div className="text-sm text-[--text-secondary] capitalize">{category.replace(/([A-Z])/g, ' $1').trim()}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const EmployeeCard: React.FC<{
|
|
employee: Employee;
|
|
report?: Report;
|
|
mode: 'submissions' | 'reports';
|
|
isOwner: boolean;
|
|
onGenerateReport?: (employee: Employee) => void;
|
|
isGeneratingReport?: boolean;
|
|
onViewReport?: (report: Report, employeeName: string) => void;
|
|
}> = ({ employee, report, mode, isOwner, onGenerateReport, isGeneratingReport, onViewReport }) => {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
return (
|
|
<Card className="hover:shadow-md transition-shadow">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
|
|
{employee.initials}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-[--text-primary]">{employee.name}</h3>
|
|
<p className="text-sm text-[--text-secondary]">
|
|
{employee.role} {employee.department && `• ${employee.department}`}
|
|
</p>
|
|
</div>
|
|
{employee.isOwner && (
|
|
<span className="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">
|
|
Owner
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
{report && (
|
|
<>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => onViewReport?.(report, employee.name)}
|
|
>
|
|
View Full Report
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
>
|
|
{isExpanded ? 'Hide' : 'View'} Summary
|
|
</Button>
|
|
</>
|
|
)}
|
|
{isOwner && mode === 'reports' && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => onGenerateReport?.(employee)}
|
|
disabled={isGeneratingReport}
|
|
>
|
|
{isGeneratingReport ? 'Generating...' : report ? 'Regenerate Report' : 'Generate Report'}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{isExpanded && report && (
|
|
<div className="mt-4 pt-4 border-t border-[--border-color] space-y-4">
|
|
<div>
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Role & Output</h4>
|
|
<p className="text-sm text-[--text-secondary]">{report.roleAndOutput.responsibilities}</p>
|
|
</div>
|
|
|
|
{report.grading?.[0]?.scores && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-[--background-tertiary] rounded-lg p-4">
|
|
<RadarPerformanceChart
|
|
title="Performance Profile"
|
|
data={report.grading[0].scores.map(s => ({ label: s.subject, value: (s.value / s.fullMark) * 100 }))}
|
|
/>
|
|
</div>
|
|
<div className="bg-[--background-tertiary] rounded-lg p-4">
|
|
<ScoreBarList
|
|
title="Score Breakdown"
|
|
items={report.grading[0].scores.map(s => ({ label: s.subject, value: s.value, max: s.fullMark }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Key Strengths</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{report.insights.strengths.map((strength, idx) => (
|
|
<span key={idx} className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">
|
|
{strength}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Development Areas</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{report.insights.weaknesses.map((weakness, idx) => (
|
|
<span key={idx} className="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">
|
|
{weakness}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-medium text-[--text-primary] mb-2">Recommendations</h4>
|
|
<ul className="space-y-1">
|
|
{report.recommendations.map((rec, idx) => (
|
|
<li key={idx} className="text-sm text-[--text-secondary] flex items-start">
|
|
<span className="w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 mr-2 flex-shrink-0"></span>
|
|
{rec}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const EmployeeData: React.FC<EmployeeDataProps> = ({ mode }) => {
|
|
const { employees, reports, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, saveReport, orgId } = useOrg();
|
|
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
|
|
const [generatingReports, setGeneratingReports] = useState<Set<string>>(new Set());
|
|
const [generatingCompanyReport, setGeneratingCompanyReport] = useState(false);
|
|
const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | Report; type: 'company' | 'employee'; employeeName?: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Load company report for owners
|
|
const loadCompanyReport = async () => {
|
|
if (isOwner(user?.uid || '') && mode === 'reports') {
|
|
try {
|
|
const history = await getFullCompanyReportHistory();
|
|
if (history.length > 0) {
|
|
setCompanyReport(history[0]);
|
|
} else {
|
|
// Fallback to sample report if no real report exists
|
|
setCompanyReport(SAMPLE_COMPANY_REPORT);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load company report:', error);
|
|
setCompanyReport(SAMPLE_COMPANY_REPORT);
|
|
}
|
|
}
|
|
};
|
|
loadCompanyReport();
|
|
}, [isOwner, user?.uid, mode, getFullCompanyReportHistory]);
|
|
|
|
const handleGenerateReport = async (employee: Employee) => {
|
|
setGeneratingReports(prev => new Set(prev).add(employee.id));
|
|
|
|
try {
|
|
console.log('Generating report for employee:', employee.name, 'in org:', orgId);
|
|
|
|
// Use the OrgContext method instead of direct API call
|
|
const report = await generateEmployeeReport(employee);
|
|
|
|
if (report) {
|
|
console.log('Report generated and saved successfully for:', employee.name);
|
|
} else {
|
|
console.error('Report generation failed for:', employee.name);
|
|
// Show user-friendly error
|
|
alert(`Failed to generate report for ${employee.name}. Please try again.`);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating report:', error);
|
|
alert(`Error generating report for ${employee.name}: ${error.message}`);
|
|
} finally {
|
|
setGeneratingReports(prev => {
|
|
const newSet = new Set(prev);
|
|
newSet.delete(employee.id);
|
|
return newSet;
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleGenerateCompanyReport = async () => {
|
|
setGeneratingCompanyReport(true);
|
|
|
|
try {
|
|
console.log('Generating company report for org:', orgId);
|
|
const newReport = await generateCompanyReport();
|
|
console.log('Received new company report:', newReport);
|
|
setCompanyReport(newReport);
|
|
console.log('Company report generated and state updated successfully');
|
|
} catch (error) {
|
|
console.error('Error generating company report:', error);
|
|
alert(`Error generating company report: ${error.message}`);
|
|
} finally {
|
|
setGeneratingCompanyReport(false);
|
|
}
|
|
};
|
|
|
|
const currentUserIsOwner = isOwner(user?.uid || '');
|
|
|
|
// Filter employees based on user access
|
|
const visibleEmployees = currentUserIsOwner
|
|
? employees
|
|
: employees.filter(emp => emp.id === user?.uid);
|
|
|
|
return (
|
|
<div className="p-6 max-w-6xl mx-auto">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold text-[--text-primary]">
|
|
{mode === 'submissions' ? 'Employee Submissions' : 'Employee Reports'}
|
|
</h1>
|
|
<p className="text-[--text-secondary] mt-1">
|
|
{mode === 'submissions'
|
|
? 'Manage employee data and submissions'
|
|
: 'View AI-generated insights and reports'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Company Report - Only visible to owners in reports mode */}
|
|
{currentUserIsOwner && mode === 'reports' && (
|
|
<div className="mb-6">
|
|
{companyReport ? (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-semibold text-[--text-primary]">Company Report</h2>
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => setSelectedReport({ report: companyReport, type: 'company' })}
|
|
>
|
|
View Full Report
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
onClick={handleGenerateCompanyReport}
|
|
disabled={generatingCompanyReport}
|
|
>
|
|
{generatingCompanyReport ? 'Regenerating...' : 'Regenerate Report'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<CompanyReportCard report={companyReport} />
|
|
</div>
|
|
) : (
|
|
<Card>
|
|
<div className="text-center py-8">
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-2">
|
|
Generate Company Report
|
|
</h3>
|
|
<p className="text-[--text-secondary] mb-4">
|
|
Create a comprehensive AI-powered report analyzing your organization's performance,
|
|
strengths, and recommendations based on employee data.
|
|
</p>
|
|
<Button
|
|
onClick={handleGenerateCompanyReport}
|
|
disabled={generatingCompanyReport}
|
|
>
|
|
{generatingCompanyReport ? 'Generating Report...' : 'Generate Company Report'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Employee Cards */}
|
|
<div className="space-y-4">
|
|
<h2 className="text-xl font-semibold text-[--text-primary]">
|
|
{currentUserIsOwner ? 'All Employees' : 'Your Information'}
|
|
</h2>
|
|
{visibleEmployees.length === 0 ? (
|
|
<Card>
|
|
<div className="text-center py-8">
|
|
<p className="text-[--text-secondary]">No employees found.</p>
|
|
{currentUserIsOwner && (
|
|
<Button className="mt-4" size="sm">
|
|
Invite First Employee
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
visibleEmployees.map(employee => (
|
|
<EmployeeCard
|
|
key={employee.id}
|
|
employee={employee}
|
|
report={reports[employee.id]}
|
|
mode={mode}
|
|
isOwner={currentUserIsOwner}
|
|
onGenerateReport={handleGenerateReport}
|
|
isGeneratingReport={generatingReports.has(employee.id)}
|
|
onViewReport={(report, employeeName) => setSelectedReport({ report, type: 'employee', employeeName })}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* Report Detail Modal */}
|
|
{selectedReport && (
|
|
<ReportDetail
|
|
report={selectedReport.report}
|
|
type={selectedReport.type}
|
|
employeeName={selectedReport.employeeName}
|
|
onClose={() => setSelectedReport(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EmployeeData;
|