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>
333 lines
20 KiB
TypeScript
333 lines
20 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { useOrg } from '../contexts/OrgContext';
|
|
import { Card, Button } from '../components/UiKit';
|
|
import { FigmaAlert } from '../components/figma/FigmaAlert';
|
|
import { CompanyReport } from '../types';
|
|
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
|
|
|
const CompanyWiki: React.FC = () => {
|
|
const { org, employees, getFullCompanyReportHistory, generateCompanyWiki } = useOrg();
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const history = await getFullCompanyReportHistory();
|
|
if (history.length) setCompanyReport(history[0]);
|
|
} catch (e) {
|
|
console.error('Failed loading company report history', e);
|
|
}
|
|
})();
|
|
}, [getFullCompanyReportHistory]);
|
|
|
|
const generateReport = async () => {
|
|
setIsGenerating(true);
|
|
setError(null);
|
|
try {
|
|
const report = await generateCompanyWiki();
|
|
setCompanyReport(report);
|
|
} catch (e: any) {
|
|
console.error(e);
|
|
setError('Failed to generate company wiki');
|
|
} finally {
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-6 max-w-6xl mx-auto">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold text-[--text-primary]">Company Wiki</h1>
|
|
<p className="text-[--text-secondary] mt-1">
|
|
Organization overview and insights
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Company Info</h3>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Name:</span>
|
|
<div className="font-medium text-[--text-primary]">{org?.name}</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Industry:</span>
|
|
<div className="font-medium text-[--text-primary]">{org?.industry}</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Size:</span>
|
|
<div className="font-medium text-[--text-primary]">{org?.size}</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Team Stats</h3>
|
|
<div className="space-y-2">
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Total Employees:</span>
|
|
<div className="font-medium text-[--text-primary]">{employees.length}</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Departments:</span>
|
|
<div className="font-medium text-[--text-primary]">
|
|
{[...new Set(employees.map(e => e.department))].length}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-sm text-[--text-secondary]">Roles:</span>
|
|
<div className="font-medium text-[--text-primary]">
|
|
{[...new Set(employees.map(e => e.role))].length}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<Card>
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">Quick Actions</h3>
|
|
<div className="space-y-3">
|
|
<Button onClick={generateReport} disabled={isGenerating} className="w-full">
|
|
{isGenerating ? 'Generating...' : companyReport ? 'Regenerate Company Wiki' : 'Generate Company Wiki'}
|
|
</Button>
|
|
{error && <FigmaAlert type="error" message={error} />}
|
|
{!companyReport && !isGenerating && (
|
|
<FigmaAlert type="info" message="No company wiki generated yet. Use the button above to create one." />
|
|
)}
|
|
<Button variant="secondary" className="w-full" disabled={!companyReport}>
|
|
Export Data
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
{companyReport && (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<h3 className="text-xl font-semibold text-[--text-primary] mb-4">Executive Summary</h3>
|
|
<p className="text-[--text-secondary] whitespace-pre-line mb-4">{companyReport.executiveSummary}</p>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
|
<div className="text-2xl font-bold text-blue-500">{companyReport.overview.totalEmployees}</div>
|
|
<div className="text-sm text-[--text-secondary]">Employees</div>
|
|
</div>
|
|
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
|
<div className="text-2xl font-bold text-green-500">{companyReport.overview?.departmentBreakdown?.length || 0}</div>
|
|
<div className="text-sm text-[--text-secondary]">Departments</div>
|
|
</div>
|
|
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
|
<div className="text-2xl font-bold text-purple-500">{companyReport.organizationalStrengths?.length || 0}</div>
|
|
<div className="text-sm text-[--text-secondary]">Strength Areas</div>
|
|
</div>
|
|
<div className="text-center p-4 bg-[--background-secondary] rounded-lg">
|
|
<div className="text-2xl font-bold text-orange-500">{companyReport.organizationalRisks?.length || 0}</div>
|
|
<div className="text-sm text-[--text-secondary]">Risks</div>
|
|
</div>
|
|
</div>
|
|
{(Array.isArray(companyReport.gradingOverview) && companyReport.gradingOverview.length > 0) && (
|
|
<div className="mt-6 p-4 bg-[--background-tertiary] rounded-lg">
|
|
<RadarPerformanceChart
|
|
title="Organizational Grading"
|
|
data={companyReport.gradingOverview.map((g: any) => ({
|
|
label: g.category || g.department || g.subject || 'Metric',
|
|
value: g.value ?? g.averageScore ?? 0
|
|
}))}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<Card>
|
|
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Strengths</h4>
|
|
<ul className="space-y-2">
|
|
{(companyReport.organizationalStrengths || []).map((s: any, i) => <li key={i} className="text-[--text-secondary] text-sm">• {s.area || s}</li>)}
|
|
</ul>
|
|
</Card>
|
|
<Card>
|
|
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Risks</h4>
|
|
<ul className="space-y-2">
|
|
{(companyReport.organizationalRisks || []).map((r, i) => <li key={i} className="text-[--text-secondary] text-sm">• {r}</li>)}
|
|
</ul>
|
|
</Card>
|
|
<Card>
|
|
<h4 className="text-lg font-semibold text-[--text-primary] mb-3">Forward Plan</h4>
|
|
<div>
|
|
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Goals</h5>
|
|
<ul className="mb-2 list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
|
{(companyReport.operatingPlan?.nextQuarterGoals || companyReport.forwardOperatingPlan?.quarterlyGoals || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
|
</ul>
|
|
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Resource Needs</h5>
|
|
<ul className="mb-2 list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
|
{(companyReport.operatingPlan?.resourceNeeds || companyReport.forwardOperatingPlan?.resourceNeeds || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
|
</ul>
|
|
<h5 className="font-medium text-[--text-primary] text-sm mb-1">Risk Mitigation</h5>
|
|
<ul className="list-disc list-inside text-[--text-secondary] text-sm space-y-1">
|
|
{(companyReport.operatingPlan?.riskMitigation || companyReport.forwardOperatingPlan?.riskMitigation || []).map((g: string, i: number) => <li key={i}>{g}</li>)}
|
|
</ul>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Company Profile - Q&A Format from Onboarding */}
|
|
<div className="mt-6">
|
|
<h3 className="text-2xl font-semibold text-[--text-primary] mb-6">Company Profile</h3>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{org?.mission && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What is your company's mission?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.mission}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.vision && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What is your company's vision?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.vision}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.evolution && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">How has your company evolved over time?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.evolution}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.advantages && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What are your competitive advantages?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.advantages}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.vulnerabilities && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What are your key vulnerabilities?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.vulnerabilities}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.shortTermGoals && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What are your short-term goals?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.shortTermGoals}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.longTermGoals && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What are your long-term goals?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.longTermGoals}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.cultureDescription && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">How would you describe your company culture?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.cultureDescription}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.workEnvironment && (
|
|
<Card className="p-4">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">What is your work environment like?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.workEnvironment}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
{org?.additionalContext && (
|
|
<Card className="p-4 lg:col-span-2">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Question:</h4>
|
|
<p className="text-[--text-primary] font-medium">Any additional context about your company?</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-medium text-[--text-secondary] mb-1">Answer:</h4>
|
|
<p className="text-[--text-primary] text-sm leading-relaxed">{org.additionalContext}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{org?.description && (
|
|
<Card className="mt-6">
|
|
<h3 className="text-lg font-semibold text-[--text-primary] mb-3">About</h3>
|
|
<p className="text-[--text-secondary]">{org.description}</p>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CompanyWiki;
|