import React, { useState, useEffect } from 'react'; import { useOrg } from '../contexts/OrgContext'; import { CompanyReport, Employee, Report } from '../types'; import { SAMPLE_COMPANY_REPORT } from '../constants'; const Reports: React.FC = () => { const { employees, reports, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId } = useOrg(); const [companyReport, setCompanyReport] = useState(null); const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | Report; type: 'company' | 'employee'; employeeName?: string } | null>(null); const [searchQuery, setSearchQuery] = useState(''); const [generatingReports, setGeneratingReports] = useState>(new Set()); const [generatingCompanyReport, setGeneratingCompanyReport] = useState(false); const currentUserIsOwner = isOwner(user?.uid || ''); // Load company report on component mount useEffect(() => { const loadCompanyReport = async () => { if (currentUserIsOwner) { try { const history = await getFullCompanyReportHistory(); if (history.length > 0) { setCompanyReport(history[0]); // Auto-select company report by default setSelectedReport({ report: history[0], type: 'company' }); } else { setCompanyReport(SAMPLE_COMPANY_REPORT); setSelectedReport({ report: SAMPLE_COMPANY_REPORT, type: 'company' }); } } catch (error) { console.error('Failed to load company report:', error); setCompanyReport(SAMPLE_COMPANY_REPORT); setSelectedReport({ report: SAMPLE_COMPANY_REPORT, type: 'company' }); } } }; loadCompanyReport(); }, [currentUserIsOwner, getFullCompanyReportHistory]); // Filter and sort employees const visibleEmployees = currentUserIsOwner ? employees.filter(emp => emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ).sort((a, b) => a.name.localeCompare(b.name)) : employees.filter(emp => emp.id === user?.uid); const handleEmployeeSelect = (employee: Employee) => { const employeeReport = reports[employee.id]; if (employeeReport) { setSelectedReport({ report: employeeReport, type: 'employee', employeeName: employee.name }); } }; const handleCompanyReportSelect = () => { if (companyReport) { setSelectedReport({ report: companyReport, type: 'company' }); } }; const handleGenerateCompanyReport = async () => { setGeneratingCompanyReport(true); try { const newReport = await generateCompanyReport(); setCompanyReport(newReport); setSelectedReport({ report: newReport, type: 'company' }); } catch (error) { console.error('Error generating company report:', error); } finally { setGeneratingCompanyReport(false); } }; return (
{/* Left Sidebar - Navigation */}
{/* Company Logo */}
Auditly Company
{/* Navigation Items */}
Company Wiki
Submissions
Reports
Chat
Help
{/* Bottom Section - Settings and CTA */}
Settings
{/* CTA Card */}
Build [Company]'s Report
Share this form with your team members to capture valuable info about your company to train Auditly.
Invite
Copy
{/* Middle Section - Employee List */}
Employees
{/* Search */}
setSearchQuery(e.target.value)} className="flex-1 bg-transparent text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight outline-none" />
{/* Employee List */}
{/* Company Report Item */} {currentUserIsOwner && (
C
Company Report
)} {/* Employee Items */} {visibleEmployees.map((employee) => (
handleEmployeeSelect(employee)} >
{employee.initials}
{employee.name}
))}
{/* Main Content Area */}
{selectedReport ? ( selectedReport.type === 'company' ? ( ) : ( ) ) : (

Select a Report

Choose a company or employee report from the list to view details.

)}
); }; // Component for displaying company report content const CompanyReportContent: React.FC<{ report: CompanyReport; onRegenerate: () => void; isGenerating: boolean; }> = ({ report, onRegenerate, isGenerating }) => { return ( <> {/* Header */}
Company Report
Download as PDF
{/* Content */}
{/* Company Weaknesses */}
Company Weaknesses
{report?.weaknesses?.map((weakness, index) => (
{weakness.title}:
{weakness.description}
{index < (report?.weaknesses?.length || 0) - 1 && (
)}
)) || (
Lack of Structure:
People are confused about their roles. No one knows who's responsible.
)}
{/* Personnel Changes */} {report?.personnelChanges && (
Personnel Changes
{report.personnelChanges} {/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
)} {/* Grading Overview */}
Grading Overview
Campaigns
Social Media
Creative
Tech
Admin/OPS
Department Overview
Overall Grade
A
Overall company performance shows strong collaboration and delivery with opportunities for process improvement.
{/* Hiring Needs */} {report?.immediateHiringNeeds && (
Hiring Needs
{report.immediateHiringNeeds} {/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
)} {/* Forward Plan */} {report?.forwardOperatingPlan && (
Forward Plan
{report.forwardOperatingPlan} {/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
)} {/* Company Strengths */} {report?.organizationalStrengths && (
Company Strengths
{report.organizationalStrengths.map((strength, index) => (
{strength.title}:
{strength.description}
{index < report.organizationalStrengths.length - 1 && (
)}
))}
)}
); }; // Component for displaying employee report content const EmployeeReportContent: React.FC<{ report: Report; employeeName: string; }> = ({ report, employeeName }) => { return ( <> {/* Header */}
{employeeName}'s Answers
Download as PDF
{/* Content */}
{/* Performance Overview */}
Role & Responsibilities

{report.roleAndOutput?.responsibilities || 'No role information available.'}

{/* Work Output */} {report.roleAndOutput?.output && (
Work Output

{report.roleAndOutput.output}

)} {/* Skills & Experience */} {report.skillsAndExperience && (
Skills & Experience

{report.skillsAndExperience}

)} {/* Communication Style */} {report.communicationStyle && (
Communication Style

{report.communicationStyle}

)}
); }; export default Reports;