update 9/20/25
This commit is contained in:
@@ -5,10 +5,13 @@ import { secureApi } from '../services/secureApi';
|
||||
import { CompanyReport, Employee, EmployeeReport } from '../types';
|
||||
import { SAMPLE_COMPANY_REPORT } from '../constants';
|
||||
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
||||
import { downloadCompanyReportPDF, downloadEmployeeReportPDF } from '../utils/pdfUtils';
|
||||
import FigmaPrimaryButton from '../components/figma/FigmaButton';
|
||||
import { DownloadIcon } from '../components/figma/figmaIcon';
|
||||
|
||||
const Reports: React.FC = () => {
|
||||
const location = useLocation();
|
||||
const { employees, reports, submissions, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId } = useOrg();
|
||||
const { employees, reports, submissions, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId, org } = useOrg();
|
||||
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
|
||||
const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | EmployeeReport; type: 'company' | 'employee'; employeeName?: string } | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
@@ -166,12 +169,12 @@ const Reports: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 self-stretch rounded-3xl shadow-[0px_0px_15px_0px_rgba(0,0,0,0.08)] flex justify-between items-start overflow-hidden">
|
||||
<>
|
||||
{/* Middle Section - Employee List */}
|
||||
<div className="flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] flex justify-start items-center">
|
||||
<div className="h-100vh flex-1 self-stretch bg-[--Neutrals-NeutralSlate0] flex justify-start items-center">
|
||||
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start">
|
||||
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Employees</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-950] text-base font-medium font-['Inter'] leading-normal">Employees</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-2">
|
||||
{/* Search */}
|
||||
@@ -188,7 +191,7 @@ const Reports: React.FC = () => {
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="flex-1 bg-transparent text-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight outline-none"
|
||||
className="flex-1 bg-transparent text-[--Text-Gray-500] text-sm font-normal font-['Inter'] leading-tight outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,11 +207,11 @@ const Reports: React.FC = () => {
|
||||
onClick={handleCompanyReportSelect}
|
||||
>
|
||||
<div className="w-7 h-7 p-1 bg-[--Brand-Orange] rounded-[666.67px] flex justify-center items-center">
|
||||
<div className="text-center justify-start text-[--Neutrals-NeutralSlate0] text-xs font-medium font-['Inter'] leading-none">
|
||||
<div className="text-center justify-start text-[--Text-Gray-0] text-xs font-medium font-['Inter'] leading-none">
|
||||
C
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Report</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-950] text-sm font-normal font-['Inter'] leading-tight">Company Report</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -226,7 +229,7 @@ const Reports: React.FC = () => {
|
||||
onClick={() => handleEmployeeSelect(employee)}
|
||||
>
|
||||
<div className="w-7 h-7 p-1 bg-[--Neutrals-NeutralSlate100] rounded-[666.67px] flex justify-center items-center relative">
|
||||
<div className="text-center justify-start text-[--Neutrals-NeutralSlate500] text-xs font-medium font-['Inter'] leading-none">
|
||||
<div className="text-center justify-start text-[--Text-Gray-500] text-xs font-medium font-['Inter'] leading-none">
|
||||
{employee.initials}
|
||||
</div>
|
||||
{/* Status indicator */}
|
||||
@@ -240,7 +243,7 @@ const Reports: React.FC = () => {
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-gray-300 rounded-full" title="No submission yet" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-sm font-normal font-['Inter'] leading-tight">
|
||||
{employee.name}
|
||||
</div>
|
||||
{isGenerating && (
|
||||
@@ -261,6 +264,7 @@ const Reports: React.FC = () => {
|
||||
report={selectedReport.report as CompanyReport}
|
||||
onRegenerate={handleGenerateCompanyReport}
|
||||
isGenerating={generatingCompanyReport}
|
||||
org={org}
|
||||
/>
|
||||
) : (
|
||||
(() => {
|
||||
@@ -277,6 +281,8 @@ const Reports: React.FC = () => {
|
||||
isGenerating={generatingEmployeeReport === employeeId}
|
||||
hasSubmission={!!submissions[employeeId]}
|
||||
showGenerateButton={!reports[employeeId] && !!submissions[employeeId]}
|
||||
employees={employees}
|
||||
org={org}
|
||||
/>
|
||||
);
|
||||
})()
|
||||
@@ -284,10 +290,10 @@ const Reports: React.FC = () => {
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h3 className="text-lg font-semibold text-[--Neutrals-NeutralSlate950] mb-2">
|
||||
<h3 className="text-lg font-semibold text-[--Text-Gray-950] mb-2">
|
||||
Select a Report
|
||||
</h3>
|
||||
<p className="text-[--Neutrals-NeutralSlate500]">
|
||||
<p className="text-[--Text-Gray-500]">
|
||||
Choose a company or employee report from the list to view details.
|
||||
</p>
|
||||
</div>
|
||||
@@ -295,7 +301,7 @@ const Reports: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -304,7 +310,8 @@ const CompanyReportContent: React.FC<{
|
||||
report: CompanyReport;
|
||||
onRegenerate: () => void;
|
||||
isGenerating: boolean;
|
||||
}> = ({ report, onRegenerate, isGenerating }) => {
|
||||
org?: any;
|
||||
}> = ({ report, onRegenerate, isGenerating, org }) => {
|
||||
// Default to the first department in the array
|
||||
const [activeDepartmentTab, setActiveDepartmentTab] = useState(() =>
|
||||
report?.gradingBreakdown?.[0]?.departmentNameShort || 'Campaigns'
|
||||
@@ -317,7 +324,7 @@ const CompanyReportContent: React.FC<{
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="self-stretch px-5 py-3 inline-flex justify-start items-center gap-2.5">
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">
|
||||
Company Report
|
||||
</div>
|
||||
<div className="flex justify-start items-center gap-3">
|
||||
@@ -337,21 +344,17 @@ const CompanyReportContent: React.FC<{
|
||||
)}
|
||||
</div>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">
|
||||
<div className="justify-center text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">
|
||||
{isGenerating ? 'Generating...' : 'Refresh Report'}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="px-3 py-2.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="relative">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2" stroke="var(--Neutrals-NeutralSlate0)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight">Download as PDF</div>
|
||||
</div>
|
||||
</div>
|
||||
<FigmaPrimaryButton
|
||||
onClick={() => downloadCompanyReportPDF(report, org?.companyName || 'Company')}
|
||||
text="Download as PDF"
|
||||
size="tiny"
|
||||
iconLeft={<DownloadIcon />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -360,14 +363,14 @@ const CompanyReportContent: React.FC<{
|
||||
{/* Company Weaknesses */}
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Weaknesses</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Company Weaknesses</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate100] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
|
||||
{report?.weaknesses?.map((weakness, index) => (
|
||||
<div key={index}>
|
||||
<div className="self-stretch inline-flex justify-between items-start">
|
||||
<div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">{weakness.title}:</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{weakness.description}</div>
|
||||
<div className="w-48 justify-start text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">{weakness.title}:</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{weakness.description}</div>
|
||||
</div>
|
||||
{index < (report?.weaknesses?.length || 0) - 1 && (
|
||||
<div className="mt-4 self-stretch w-full flex">
|
||||
@@ -379,8 +382,8 @@ const CompanyReportContent: React.FC<{
|
||||
</div>
|
||||
)) || (
|
||||
<div className="self-stretch inline-flex justify-between items-start">
|
||||
<div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Lack of Structure:</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">People are confused about their roles. No one knows who's responsible.</div>
|
||||
<div className="w-48 justify-start text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Lack of Structure:</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">People are confused about their roles. No one knows who's responsible.</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -390,13 +393,13 @@ const CompanyReportContent: React.FC<{
|
||||
{report?.personnelChanges && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Personnel Changes</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Personnel Changes</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-6">
|
||||
{/* New Hires */}
|
||||
{report.personnelChanges.newHires && report.personnelChanges.newHires.length > 0 && (
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">New Hires</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">New Hires</div>
|
||||
{report.personnelChanges.newHires.map((hire, index) => (
|
||||
<div key={index} className="self-stretch p-3 bg-green-50 rounded-lg border border-green-200">
|
||||
<div className="font-medium text-green-800">{hire.name} - {hire.role}</div>
|
||||
@@ -410,7 +413,7 @@ const CompanyReportContent: React.FC<{
|
||||
{/* Promotions */}
|
||||
{report.personnelChanges.promotions && report.personnelChanges.promotions.length > 0 && (
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Promotions</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Promotions</div>
|
||||
{report.personnelChanges.promotions.map((promotion, index) => (
|
||||
<div key={index} className="self-stretch p-3 bg-blue-50 rounded-lg border border-blue-200">
|
||||
<div className="font-medium text-blue-800">{promotion.name}</div>
|
||||
@@ -424,7 +427,7 @@ const CompanyReportContent: React.FC<{
|
||||
{/* Departures */}
|
||||
{report.personnelChanges.departures && report.personnelChanges.departures.length > 0 && (
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Departures</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Departures</div>
|
||||
{report.personnelChanges.departures.map((departure, index) => (
|
||||
<div key={index} className="self-stretch p-3 bg-red-50 rounded-lg border border-red-200">
|
||||
<div className="font-medium text-red-800">{departure.name}</div>
|
||||
@@ -440,7 +443,7 @@ const CompanyReportContent: React.FC<{
|
||||
{(!report.personnelChanges.newHires || report.personnelChanges.newHires.length === 0) &&
|
||||
(!report.personnelChanges.promotions || report.personnelChanges.promotions.length === 0) &&
|
||||
(!report.personnelChanges.departures || report.personnelChanges.departures.length === 0) && (
|
||||
<div className="self-stretch text-[--Neutrals-NeutralSlate500] text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="self-stretch text-[--Text-Gray-500] text-base font-normal font-['Inter'] leading-normal">
|
||||
No personnel changes to report.
|
||||
</div>
|
||||
)}
|
||||
@@ -452,14 +455,14 @@ const CompanyReportContent: React.FC<{
|
||||
{report?.immediateHiringNeeds && report.immediateHiringNeeds.length > 0 && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Immediate Hiring Needs</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Immediate Hiring Needs</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] inline-flex flex-col justify-start items-start gap-4">
|
||||
{report.immediateHiringNeeds.map((need, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<div key={index} className="self-stretch content-end inline-flex justify-around items-center ">
|
||||
<div className="flex-2 w-max p-3 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">{need.role} - {need.department}</div>
|
||||
<div className="flex-9 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{need.reasoning}</div>
|
||||
<div className="flex-2 w-max p-3 justify-start text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">{need.role} - {need.department}</div>
|
||||
<div className="flex-9 justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{need.reasoning}</div>
|
||||
</div>
|
||||
{index !== report.immediateHiringNeeds.length - 1 && (
|
||||
<div className="inline-flex self-stretch" data-svg-wrapper>
|
||||
@@ -478,14 +481,14 @@ const CompanyReportContent: React.FC<{
|
||||
{report?.forwardOperatingPlan && (
|
||||
<div className="w-full self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Forward Plan</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Forward Plan</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
|
||||
{
|
||||
report.forwardOperatingPlan.map((plan, index) => (
|
||||
<div key={index} className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal tracking-wide font-['Neue_Montreal'] leading-normal">{plan.title}</div>
|
||||
<div className="justify-start text-[--Text-Gray-800] text-base font-normal tracking-wide font-['Neue_Montreal'] leading-normal">{plan.title}</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<ul className="list-none space-y-1">
|
||||
{plan.details.map((detail, idx) => (
|
||||
@@ -511,7 +514,7 @@ const CompanyReportContent: React.FC<{
|
||||
{report?.strengths && (
|
||||
<div className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] inline-flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-4">
|
||||
{report.strengths.map((strength, idx) => (
|
||||
@@ -524,7 +527,7 @@ const CompanyReportContent: React.FC<{
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -538,20 +541,20 @@ const CompanyReportContent: React.FC<{
|
||||
{report?.organizationalImpactSummary && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-[--Neutrals-NeutralSlate50] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-6">
|
||||
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Mission Critical</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Mission Critical</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
{report.organizationalImpactSummary.missionCritical.map((employee, index) => (
|
||||
<div key={index} className="self-stretch flex justify-between items-start">
|
||||
<div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
<div className="w-48 text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Text-Gray-800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -560,13 +563,13 @@ const CompanyReportContent: React.FC<{
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="w-3 h-3 bg-orange-500 rounded-full"></div>
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Highly Valuable</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Highly Valuable</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
{report.organizationalImpactSummary.highlyValuable.map((employee, index) => (
|
||||
<div key={index} className="self-stretch flex justify-between items-start">
|
||||
<div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
<div className="w-48 text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Text-Gray-800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -575,13 +578,13 @@ const CompanyReportContent: React.FC<{
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Core Support</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Core Support</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
{report.organizationalImpactSummary.coreSupport.map((employee, index) => (
|
||||
<div key={index} className="self-stretch flex justify-between items-start">
|
||||
<div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
<div className="w-48 text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Text-Gray-800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -590,13 +593,13 @@ const CompanyReportContent: React.FC<{
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Low Criticality</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Low Criticality</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
{report.organizationalImpactSummary.lowCriticality.map((employee, index) => (
|
||||
<div key={index} className="self-stretch flex justify-between items-start">
|
||||
<div className="w-48 text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
<div className="w-48 text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">{employee.employeeName}</div>
|
||||
<div className="flex-1 text-[--Text-Gray-800] text-sm font-normal font-['Inter'] leading-tight">{employee.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -608,7 +611,7 @@ const CompanyReportContent: React.FC<{
|
||||
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Organizational Impact Summary</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="p-1 bg-[--Neutrals-NeutralSlate200] rounded-full outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate50] inline-flex justify-start items-center gap-1">
|
||||
@@ -623,7 +626,7 @@ const CompanyReportContent: React.FC<{
|
||||
onClick={() => setActiveImpactSummary(dept.category)}
|
||||
>
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className={`justify-start text-xs flex items-center font-medium font-['Inter'] leading-none ${activeImpactSummary === dept.category ? 'text-[--Neutrals-NeutralSlate950]' : 'text-zinc-600'
|
||||
<div className={`justify-start text-xs flex items-center font-medium font-['Inter'] leading-none ${activeImpactSummary === dept.category ? 'text-[--Text-Gray-950]' : 'text-zinc-600'
|
||||
}`}>
|
||||
<span className={`flex-shrink-0 w-2 h-2 rounded-full mr-2
|
||||
${dept?.employees.length === 0 ? 'blinkLightEmpty bg-[--Neutrals-NeutralSlate100]' : ''}
|
||||
@@ -655,10 +658,10 @@ const CompanyReportContent: React.FC<{
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="self-stretch inline-flex justify-start items-center">
|
||||
<div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal w-fit">{item.employeeName} - {item.impact}</div>
|
||||
<div className="flex-1 text-right justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{item.suggestedPay}</div>
|
||||
<div className="w-48 justify-start text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal w-fit">{item.employeeName} - {item.impact}</div>
|
||||
<div className="flex-1 text-right justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{item.suggestedPay}</div>
|
||||
</div>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">{item.description}</div>
|
||||
<div className="self-stretch justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{item.description}</div>
|
||||
</div>
|
||||
<div className="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-[--Neutrals-NeutralSlate200]" />
|
||||
</div>
|
||||
@@ -674,7 +677,7 @@ const CompanyReportContent: React.FC<{
|
||||
{/* Grading Overview */}
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Grading Overview</div>
|
||||
<div className="justify-start text-[--Text-Gray-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Grading Overview</div>
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="p-1 bg-[--Neutrals-NeutralSlate200] rounded-full outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate50] inline-flex justify-start items-center gap-1">
|
||||
@@ -689,7 +692,7 @@ const CompanyReportContent: React.FC<{
|
||||
onClick={() => setActiveDepartmentTab(dept.departmentNameShort)}
|
||||
>
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className={`justify-start text-xs font-medium font-['Inter'] leading-none ${activeDepartmentTab === dept.departmentNameShort ? 'text-[--Neutrals-NeutralSlate950]' : 'text-zinc-600'
|
||||
<div className={`justify-start text-xs font-medium font-['Inter'] leading-none ${activeDepartmentTab === dept.departmentNameShort ? 'text-[--Text-Gray-950]' : 'text-zinc-600'
|
||||
}`}>
|
||||
{dept.departmentNameShort}
|
||||
</div>
|
||||
@@ -707,11 +710,11 @@ const CompanyReportContent: React.FC<{
|
||||
{/* Department Overview Section */}
|
||||
<div className="self-stretch p-5 bg-[--Neutrals-NeutralSlate100] rounded-2xl outline outline-1 outline-offset-[-1px] outline-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-start gap-3 overflow-hidden">
|
||||
<div className="self-stretch inline-flex justify-between items-center">
|
||||
<div className="w-48 justify-start text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Department Overview</div>
|
||||
<div className="w-48 justify-start text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Department Overview</div>
|
||||
<div className="pl-3 pr-1 py-1 bg-green-500/10 rounded-2xl flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate800] text-sm font-medium font-['Inter'] leading-tight">Overall Grade</div>
|
||||
<div className="justify-start text-[--Text-Gray-800] text-sm font-medium font-['Inter'] leading-tight">Overall Grade</div>
|
||||
<div className="px-2 bg-green-500 rounded-2xl flex justify-start items-center">
|
||||
<div className="text-center justify-start text-[--Neutrals-NeutralSlate0] text-sm font-medium font-['Inter'] leading-tight">A</div>
|
||||
<div className="text-center justify-start text-[--Text-Gray-0] text-sm font-medium font-['Inter'] leading-tight">A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -720,14 +723,14 @@ const CompanyReportContent: React.FC<{
|
||||
<path d="M0 1H752" stroke="var(--Neutrals-NeutralSlate300)" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="self-stretch justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
Overall company performance shows strong collaboration and delivery with opportunities for process improvement.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Employee Radar Charts Section */}
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4">
|
||||
<div className="text-[--Neutrals-NeutralSlate800] text-base font-semibold font-['Inter'] leading-normal">Team Performance Analysis</div>
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal">Team Performance Analysis</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
|
||||
{currentDepartment.teamScores?.map((teamScore, index) => {
|
||||
const radarData = [
|
||||
@@ -741,7 +744,7 @@ const CompanyReportContent: React.FC<{
|
||||
return (
|
||||
<div key={index} className="p-4 bg-[--Neutrals-NeutralSlate50] rounded-lg shadow-sm border border-[--Neutrals-NeutralSlate200] flex flex-col justify-start items-center gap-3">
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<h3 className="text-base font-semibold text-[--Neutrals-NeutralSlate800]">{teamScore.employeeName}</h3>
|
||||
<h3 className="text-base font-semibold text-[--Text-Gray-800]">{teamScore.employeeName}</h3>
|
||||
<div className={`px-2 py-1 rounded-full text-xs font-medium ${teamScore.grade.startsWith('A') ? 'bg-green-100 text-green-800' :
|
||||
teamScore.grade.startsWith('B') ? 'bg-blue-100 text-blue-800' :
|
||||
teamScore.grade.startsWith('C') ? 'bg-yellow-100 text-yellow-800' :
|
||||
@@ -785,12 +788,14 @@ const EmployeeReportContent: React.FC<{
|
||||
isGenerating?: boolean;
|
||||
hasSubmission?: boolean;
|
||||
showGenerateButton?: boolean;
|
||||
}> = ({ report, employeeName, onGenerateReport, isGenerating = false, hasSubmission = false, showGenerateButton = false }) => {
|
||||
employees?: Employee[];
|
||||
org?: any;
|
||||
}> = ({ report, employeeName, onGenerateReport, isGenerating = false, hasSubmission = false, showGenerateButton = false, employees, org }) => {
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="self-stretch px-5 py-3 inline-flex justify-start items-center gap-2.5">
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-medium font-['Inter'] leading-normal">
|
||||
{employeeName}'s Report
|
||||
</div>
|
||||
<div className="flex justify-start items-center gap-3">
|
||||
@@ -820,16 +825,18 @@ const EmployeeReportContent: React.FC<{
|
||||
|
||||
{/* Download PDF Button - only show for actual reports */}
|
||||
{!showGenerateButton && (
|
||||
<div className="px-3 py-2.5 bg-[--Brand-Orange] rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="relative">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 14H2M12 7.33333L8 11.3333M8 11.3333L4 7.33333M8 11.3333V2" stroke="var(--white, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-white text-sm font-medium font-['Inter'] leading-tight">Download as PDF</div>
|
||||
</div>
|
||||
</div>
|
||||
<FigmaPrimaryButton
|
||||
containerExtra='h-9.5'
|
||||
text="Download as PDF"
|
||||
onClick={() => {
|
||||
const employee = employees.find(emp => emp.name === employeeName);
|
||||
if (employee) {
|
||||
downloadEmployeeReportPDF(employee, report, org?.companyName || 'Company');
|
||||
}
|
||||
}}
|
||||
size="tiny"
|
||||
iconLeft={<DownloadIcon />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -839,10 +846,10 @@ const EmployeeReportContent: React.FC<{
|
||||
{/* Role & Responsibilities */}
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Role & Responsibilities</div>
|
||||
<div className="justify-start text-[--Text-Dark-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Role & Responsibilities</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4">
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<p className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.roleAndOutput?.responsibilities || 'No role information available.'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -852,10 +859,10 @@ const EmployeeReportContent: React.FC<{
|
||||
{report.roleAndOutput && report.roleAndOutput?.selfRatedOutput && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Self-Rated Output</div>
|
||||
<div className="justify-start text-[--Text-Dark-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Self-Rated Output</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4">
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<p className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.roleAndOutput.selfRatedOutput}
|
||||
</p>
|
||||
</div>
|
||||
@@ -866,29 +873,29 @@ const EmployeeReportContent: React.FC<{
|
||||
{report.insights && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Insights & Traits</div>
|
||||
<div className="justify-start text-[--Text-Dark-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Insights & Traits</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4">
|
||||
{report.insights.personalityTraits && (
|
||||
<div className="self-stretch">
|
||||
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal mb-2">Personality Traits</div>
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal mb-2">Personality Traits</div>
|
||||
<p className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.insights.personalityTraits}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{report.insights.selfAwareness && (
|
||||
<div className="self-stretch">
|
||||
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal mb-2">Self Awareness</div>
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal mb-2">Self Awareness</div>
|
||||
<p className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.insights.selfAwareness}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{report.insights.growthDesire && (
|
||||
<div className="self-stretch">
|
||||
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal mb-2">Growth Desire</div>
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<div className="text-[--Text-Gray-800] text-base font-semibold font-['Inter'] leading-normal mb-2">Growth Desire</div>
|
||||
<p className="text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.insights.growthDesire}
|
||||
</p>
|
||||
</div>
|
||||
@@ -901,7 +908,7 @@ const EmployeeReportContent: React.FC<{
|
||||
{report.strengths && report.strengths.length > 0 && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
|
||||
<div className="justify-start text-[--Text-Dark-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Strengths</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4">
|
||||
{report.strengths.map((strength, index) => (
|
||||
@@ -914,7 +921,7 @@ const EmployeeReportContent: React.FC<{
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
<div className="flex-1 justify-start text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -925,11 +932,11 @@ const EmployeeReportContent: React.FC<{
|
||||
{report.recommendations && report.recommendations.length > 0 && (
|
||||
<div className="w-full p-3 bg-[--Neutrals-NeutralSlate100] rounded-[20px] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-1 overflow-hidden">
|
||||
<div className="self-stretch px-3 py-2 inline-flex justify-start items-center gap-2">
|
||||
<div className="justify-start text-Text-Dark-950 text-xl font-medium font-['Neue_Montreal'] leading-normal">Recommendations</div>
|
||||
<div className="justify-start text-[--Text-Dark-950] text-xl font-medium font-['Neue_Montreal'] leading-normal">Recommendations</div>
|
||||
</div>
|
||||
<div className="self-stretch p-6 bg-Light-Grays-l-gray08 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 flex flex-col justify-start items-start gap-4">
|
||||
{report.recommendations.map((recommendation, index) => (
|
||||
<div key={index} className="self-stretch text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
<div key={index} className="self-stretch text-[--Text-Gray-800] text-base font-normal font-['Inter'] leading-normal">
|
||||
• {recommendation}
|
||||
</div>
|
||||
))}
|
||||
@@ -941,4 +948,4 @@ const EmployeeReportContent: React.FC<{
|
||||
);
|
||||
};
|
||||
|
||||
export default Reports;
|
||||
export default Reports;
|
||||
|
||||
Reference in New Issue
Block a user