Implement comprehensive report system with detailed viewing and AI enhancements
- 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>
This commit is contained in:
413
pages/ReportDetail.tsx
Normal file
413
pages/ReportDetail.tsx
Normal file
@@ -0,0 +1,413 @@
|
||||
import React from 'react';
|
||||
import { Card, Button } from '../components/UiKit';
|
||||
import { CompanyReport, Report } from '../types';
|
||||
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
||||
import ScoreBarList from '../components/charts/ScoreBarList';
|
||||
|
||||
interface ReportDetailProps {
|
||||
report: CompanyReport | Report;
|
||||
type: 'company' | 'employee';
|
||||
employeeName?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const ReportDetail: React.FC<ReportDetailProps> = ({ report, type, employeeName, onClose }) => {
|
||||
if (type === 'company') {
|
||||
const companyReport = report as CompanyReport;
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-[--background-primary] rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="sticky top-0 bg-[--background-primary] border-b border-[--border-color] p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[--text-primary]">Company Report</h1>
|
||||
<p className="text-[--text-secondary]">Last updated: {new Date(companyReport.createdAt).toLocaleDateString()}</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button size="sm">Download as PDF</Button>
|
||||
<Button size="sm" variant="secondary" onClick={onClose}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Executive Summary */}
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">Executive Summary</h2>
|
||||
<p className="text-[--text-secondary] whitespace-pre-line leading-relaxed">
|
||||
{companyReport.executiveSummary}
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
{/* Overview Stats */}
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">Company Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="bg-[--background-tertiary] p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-blue-500 mb-1">{companyReport.overview.totalEmployees}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Total Employees</div>
|
||||
</div>
|
||||
<div className="bg-[--background-tertiary] p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-green-500 mb-1">{companyReport.overview.departmentBreakdown?.length || 0}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Departments</div>
|
||||
</div>
|
||||
<div className="bg-[--background-tertiary] p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-purple-500 mb-1">{companyReport.overview.averagePerformanceScore || 'N/A'}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Avg Performance</div>
|
||||
</div>
|
||||
<div className="bg-[--background-tertiary] p-4 rounded-lg text-center">
|
||||
<div className="text-3xl font-bold text-orange-500 mb-1">{companyReport.overview.riskLevel || 'Low'}</div>
|
||||
<div className="text-sm text-[--text-secondary]">Risk Level</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Key Personnel Changes */}
|
||||
{companyReport.keyPersonnelChanges && companyReport.keyPersonnelChanges.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-orange-500 rounded-full mr-3"></span>
|
||||
Key Personnel Changes
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{companyReport.keyPersonnelChanges.map((change, idx) => (
|
||||
<div key={idx} className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 className="font-semibold text-[--text-primary]">{change.employeeName}</h3>
|
||||
<p className="text-sm text-[--text-secondary]">{change.role} • {change.department}</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 text-xs rounded-full font-medium ${
|
||||
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-[--text-secondary] text-sm">{change.impact}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Immediate Hiring Needs */}
|
||||
{companyReport.immediateHiringNeeds && companyReport.immediateHiringNeeds.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-red-500 rounded-full mr-3"></span>
|
||||
Immediate Hiring Needs
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{companyReport.immediateHiringNeeds.map((need, idx) => (
|
||||
<div key={idx} className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="font-semibold text-[--text-primary]">{need.role}</h3>
|
||||
<span className={`px-2 py-1 text-xs rounded-full font-medium ${
|
||||
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}
|
||||
</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>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Forward Operating Plan */}
|
||||
{companyReport.forwardOperatingPlan && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
|
||||
Forward Operating Plan
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<h3 className="font-semibold text-[--text-primary] mb-3">Next Quarter Goals</h3>
|
||||
<ul className="space-y-2">
|
||||
{companyReport.forwardOperatingPlan.nextQuarterGoals?.map((goal, idx) => (
|
||||
<li key={idx} className="text-sm text-[--text-secondary] flex items-start">
|
||||
<span className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||||
{goal}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<h3 className="font-semibold text-[--text-primary] mb-3">Key Initiatives</h3>
|
||||
<ul className="space-y-2">
|
||||
{companyReport.forwardOperatingPlan.keyInitiatives?.map((initiative, idx) => (
|
||||
<li key={idx} className="text-sm text-[--text-secondary] flex items-start">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full mt-2 mr-3 flex-shrink-0"></span>
|
||||
{initiative}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Organizational Strengths */}
|
||||
{companyReport.organizationalStrengths && companyReport.organizationalStrengths.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
|
||||
Organizational Strengths
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{companyReport.organizationalStrengths.map((strength, idx) => (
|
||||
<div key={idx} className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<span className="text-3xl">{strength.icon || '💪'}</span>
|
||||
<div>
|
||||
<h3 className="font-semibold text-[--text-primary] mb-1">{strength.area || strength}</h3>
|
||||
<p className="text-sm text-[--text-secondary]">{strength.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Grading Overview */}
|
||||
{companyReport.gradingOverview && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-indigo-500 rounded-full mr-3"></span>
|
||||
Grading Overview
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
{Object.entries(companyReport.gradingOverview).map(([category, score], idx) => (
|
||||
<div key={idx} className="text-center p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<div className="text-3xl font-bold text-[--text-primary] mb-2">{score}/5</div>
|
||||
<div className="text-sm text-[--text-secondary] capitalize">
|
||||
{category.replace(/([A-Z])/g, ' $1').trim()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Organizational Impact Summary */}
|
||||
{companyReport.organizationalImpactSummary && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
|
||||
Organizational Impact Summary
|
||||
</h2>
|
||||
<div className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<p className="text-[--text-secondary] leading-relaxed">
|
||||
{companyReport.organizationalImpactSummary}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const employeeReport = report as Report;
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-[--background-primary] rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="sticky top-0 bg-[--background-primary] border-b border-[--border-color] p-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-[--text-primary]">{employeeName}'s Performance Report</h1>
|
||||
<p className="text-[--text-secondary]">{employeeReport.employee?.role} • {employeeReport.employee?.department}</p>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button size="sm">Download as PDF</Button>
|
||||
<Button size="sm" variant="secondary" onClick={onClose}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Self-Reported Role & Output */}
|
||||
{employeeReport.roleAndOutput && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">Self-Reported Role & Output</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="font-medium text-[--text-primary] mb-2">Responsibilities</h3>
|
||||
<p className="text-[--text-secondary] text-sm leading-relaxed">{employeeReport.roleAndOutput.responsibilities}</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h3 className="font-medium text-[--text-primary] mb-1">Clarity on Role</h3>
|
||||
<p className="text-[--text-secondary] text-sm">{employeeReport.roleAndOutput.clarityOnRole}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-[--text-primary] mb-1">Self-Rated Output</h3>
|
||||
<p className="text-[--text-secondary] text-sm">{employeeReport.roleAndOutput.selfRatedOutput}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Performance Charts */}
|
||||
{employeeReport.grading?.[0]?.scores && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">Performance Analysis</h2>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="bg-[--background-tertiary] rounded-lg p-6">
|
||||
<RadarPerformanceChart
|
||||
title="Performance Profile"
|
||||
data={employeeReport.grading[0].scores.map(s => ({
|
||||
label: s.subject,
|
||||
value: (s.value / s.fullMark) * 100
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-[--background-tertiary] rounded-lg p-6">
|
||||
<ScoreBarList
|
||||
title="Score Breakdown"
|
||||
items={employeeReport.grading[0].scores.map(s => ({
|
||||
label: s.subject,
|
||||
value: s.value,
|
||||
max: s.fullMark
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Behavioral & Psychological Insights */}
|
||||
{employeeReport.insights && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4">Behavioral & Psychological Insights</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="font-medium text-[--text-primary] mb-3">Personality Traits</h3>
|
||||
<p className="text-[--text-secondary] text-sm leading-relaxed mb-4">
|
||||
{employeeReport.insights.personalityTraits || 'No personality traits data available.'}
|
||||
</p>
|
||||
|
||||
<h3 className="font-medium text-[--text-primary] mb-3">Self-awareness</h3>
|
||||
<p className="text-[--text-secondary] text-sm leading-relaxed">
|
||||
{employeeReport.insights.selfAwareness || 'No self-awareness data available.'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-[--text-primary] mb-3">Psychological Indicators</h3>
|
||||
<ul className="space-y-2 mb-4">
|
||||
{employeeReport.insights.psychologicalIndicators?.map((indicator, 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>
|
||||
{indicator}
|
||||
</li>
|
||||
)) || <li className="text-sm text-[--text-secondary]">No psychological indicators available.</li>}
|
||||
</ul>
|
||||
|
||||
<h3 className="font-medium text-[--text-primary] mb-3">Growth Desire</h3>
|
||||
<p className="text-[--text-secondary] text-sm leading-relaxed">
|
||||
{employeeReport.insights.growthDesire || 'No growth desire data available.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Strengths & Weaknesses */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-green-500 rounded-full mr-3"></span>
|
||||
Strengths
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{employeeReport.insights?.strengths?.map((strength, idx) => (
|
||||
<div key={idx} className="flex items-center space-x-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span className="text-sm text-[--text-secondary]">{strength}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-orange-500 rounded-full mr-3"></span>
|
||||
Development Areas
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{employeeReport.insights?.weaknesses?.map((weakness, idx) => (
|
||||
<div key={idx} className="flex items-center space-x-2">
|
||||
<span className="text-orange-500">!</span>
|
||||
<span className="text-sm text-[--text-secondary]">{weakness}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Opportunities */}
|
||||
{employeeReport.opportunities && employeeReport.opportunities.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-blue-500 rounded-full mr-3"></span>
|
||||
Opportunities
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{employeeReport.opportunities.map((opp, idx) => (
|
||||
<div key={idx} className="p-4 bg-[--background-tertiary] rounded-lg">
|
||||
<h3 className="font-medium text-[--text-primary] mb-2">{opp.roleAdjustment || 'Opportunity'}</h3>
|
||||
<p className="text-sm text-[--text-secondary]">{opp.accountabilitySupport || opp.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Risks */}
|
||||
{employeeReport.risks && employeeReport.risks.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-yellow-500 rounded-full mr-3"></span>
|
||||
Risks
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{employeeReport.risks.map((risk, idx) => (
|
||||
<div key={idx} className="flex items-start space-x-2 p-3 bg-yellow-50 rounded-lg">
|
||||
<span className="text-yellow-500 mt-0.5">⚠</span>
|
||||
<span className="text-sm text-gray-700">{risk}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Recommendations */}
|
||||
{employeeReport.recommendations && employeeReport.recommendations.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-xl font-semibold text-[--text-primary] mb-4 flex items-center">
|
||||
<span className="w-3 h-3 bg-purple-500 rounded-full mr-3"></span>
|
||||
Recommendations
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{employeeReport.recommendations.map((rec, idx) => (
|
||||
<div key={idx} className="flex items-start space-x-3 p-3 bg-[--background-tertiary] rounded-lg">
|
||||
<span className="w-2 h-2 bg-purple-500 rounded-full mt-2 flex-shrink-0"></span>
|
||||
<span className="text-sm text-[--text-secondary]">{rec}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ReportDetail;
|
||||
Reference in New Issue
Block a user