Fix up a ton of pages, settings/help/wiki need improvements, report generation needs slight updates. Otherwise completed
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useOrg } from '../contexts/OrgContext';
|
||||
import { CompanyReport, Employee, Report } from '../types';
|
||||
import { CompanyReport, Employee, EmployeeReport } from '../types';
|
||||
import { SAMPLE_COMPANY_REPORT } from '../constants';
|
||||
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
||||
|
||||
const Reports: React.FC = () => {
|
||||
const { employees, reports, user, isOwner, getFullCompanyReportHistory, generateEmployeeReport, generateCompanyReport, orgId } = useOrg();
|
||||
const [companyReport, setCompanyReport] = useState<CompanyReport | null>(null);
|
||||
const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | Report; type: 'company' | 'employee'; employeeName?: string } | null>(null);
|
||||
const [selectedReport, setSelectedReport] = useState<{ report: CompanyReport | EmployeeReport; type: 'company' | 'employee'; employeeName?: string } | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [generatingReports, setGeneratingReports] = useState<Set<string>>(new Set());
|
||||
const [generatingCompanyReport, setGeneratingCompanyReport] = useState(false);
|
||||
@@ -75,22 +76,22 @@ const Reports: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-[1440px] h-[4558px] p-4 bg-Neutrals-NeutralSlate200 inline-flex justify-start items-start overflow-hidden">
|
||||
<div className="w-[1440px] h-[4558px] p-4 bg-[--Neutrals-NeutralSlate200] inline-flex justify-start items-start overflow-hidden">
|
||||
<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">
|
||||
|
||||
{/* Left Sidebar - Navigation */}
|
||||
<div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-Neutrals-NeutralSlate0 border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
|
||||
<div className="w-64 self-stretch max-w-64 min-w-64 px-3 pt-4 pb-3 bg-[--Neutrals-NeutralSlate0] border-r border-Neutrals-NeutralSlate200 inline-flex flex-col justify-between items-center overflow-hidden">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-5">
|
||||
{/* Company Logo */}
|
||||
<div className="w-60 pl-2 pr-4 py-2 bg-Neutrals-NeutralSlate0 rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
|
||||
<div className="w-60 pl-2 pr-4 py-2 bg-[--Neutrals-NeutralSlate0] rounded-3xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex justify-between items-center overflow-hidden">
|
||||
<div className="flex-1 flex justify-start items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full flex justify-start items-center gap-2.5">
|
||||
<div className="w-8 h-8 relative bg-Brand-Orange rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
|
||||
<div className="w-8 h-8 relative bg-[--Brand-Orange] rounded-full outline outline-[1.60px] outline-offset-[-1.60px] outline-white/10 overflow-hidden">
|
||||
<div className="w-8 h-8 left-0 top-0 absolute bg-gradient-to-b from-white/0 to-white/10" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 inline-flex flex-col justify-start items-start gap-0.5">
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-base font-medium font-['Inter'] leading-normal">Auditly Company</div>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Auditly Company</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
@@ -109,7 +110,7 @@ const Reports: React.FC = () => {
|
||||
<path d="M7.5 17.4996V11.333C7.5 10.8662 7.5 10.6329 7.59083 10.4546C7.67072 10.2978 7.79821 10.1703 7.95501 10.0904C8.13327 9.99962 8.36662 9.99962 8.83333 9.99962H11.1667C11.6334 9.99962 11.8667 9.99962 12.045 10.0904C12.2018 10.1703 12.3293 10.2978 12.4092 10.4546C12.5 10.6329 12.5 10.8662 12.5 11.333V17.4996M9.18141 2.30297L3.52949 6.6989C3.15168 6.99275 2.96278 7.13968 2.82669 7.32368C2.70614 7.48667 2.61633 7.67029 2.56169 7.86551C2.5 8.0859 2.5 8.32521 2.5 8.80384V14.833C2.5 15.7664 2.5 16.2331 2.68166 16.5896C2.84144 16.9032 3.09641 17.1582 3.41002 17.318C3.76654 17.4996 4.23325 17.4996 5.16667 17.4996H14.8333C15.7668 17.4996 16.2335 17.4996 16.59 17.318C16.9036 17.1582 17.1586 16.9032 17.3183 16.5896C17.5 16.2331 17.5 15.7664 17.5 14.833V8.80384C17.5 8.32521 17.5 8.0859 17.4383 7.86551C17.3837 7.67029 17.2939 7.48667 17.1733 7.32368C17.0372 7.13968 16.8483 6.99275 16.4705 6.69891L10.8186 2.30297C10.5258 2.07526 10.3794 1.9614 10.2178 1.91763C10.0752 1.87902 9.92484 1.87902 9.78221 1.91763C9.62057 1.9614 9.47418 2.07526 9.18141 2.30297Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Company Wiki</div>
|
||||
</div>
|
||||
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
||||
<div className="relative">
|
||||
@@ -117,9 +118,9 @@ const Reports: React.FC = () => {
|
||||
<path d="M11.6667 9.16602H6.66667M8.33333 12.4993H6.66667M13.3333 5.83268H6.66667M16.6667 5.66602V14.3327C16.6667 15.7328 16.6667 16.4329 16.3942 16.9677C16.1545 17.4381 15.772 17.8205 15.3016 18.0602C14.7669 18.3327 14.0668 18.3327 12.6667 18.3327H7.33333C5.9332 18.3327 5.23314 18.3327 4.69836 18.0602C4.22795 17.8205 3.8455 17.4381 3.60582 16.9677C3.33333 16.4329 3.33333 15.7328 3.33333 14.3327V5.66602C3.33333 4.26588 3.33333 3.56582 3.60582 3.03104C3.8455 2.56063 4.22795 2.17818 4.69836 1.9385C5.23314 1.66602 5.9332 1.66602 7.33333 1.66602H12.6667C14.0668 1.66602 14.7669 1.66602 15.3016 1.9385C15.772 2.17818 16.1545 2.56063 16.3942 3.03104C16.6667 3.56582 16.6667 4.26588 16.6667 5.66602Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Submissions</div>
|
||||
</div>
|
||||
<div className="w-60 px-4 py-2.5 bg-Neutrals-NeutralSlate100 rounded-[34px] inline-flex justify-start items-center gap-2">
|
||||
<div className="w-60 px-4 py-2.5 bg-[--Neutrals-NeutralSlate100] rounded-[34px] inline-flex justify-start items-center gap-2">
|
||||
<div className="relative">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipPath="url(#clip0_1042_5096)">
|
||||
@@ -132,7 +133,7 @@ const Reports: React.FC = () => {
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-start text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Reports</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Reports</div>
|
||||
</div>
|
||||
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
||||
<div className="relative">
|
||||
@@ -140,7 +141,7 @@ const Reports: React.FC = () => {
|
||||
<path d="M17.4997 9.58333C17.4997 13.4953 14.3284 16.6667 10.4164 16.6667C9.51904 16.6667 8.66069 16.4998 7.87065 16.1954C7.7262 16.1398 7.65398 16.112 7.59655 16.0987C7.54006 16.0857 7.49917 16.0803 7.44124 16.0781C7.38234 16.0758 7.31772 16.0825 7.18849 16.0958L2.92097 16.537C2.5141 16.579 2.31067 16.6001 2.19067 16.5269C2.08614 16.4631 2.01495 16.3566 1.996 16.2356C1.97425 16.0968 2.07146 15.9168 2.26588 15.557L3.62893 13.034C3.74118 12.8262 3.79731 12.7223 3.82273 12.6225C3.84784 12.5238 3.85391 12.4527 3.84588 12.3512C3.83775 12.2484 3.79266 12.1147 3.7025 11.8472C3.46289 11.1363 3.33302 10.375 3.33302 9.58333C3.33302 5.67132 6.50434 2.5 10.4164 2.5C14.3284 2.5 17.4997 5.67132 17.4997 9.58333Z" stroke="var(--Neutrals-NeutralSlate400, #A4A7AE)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Chat</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Chat</div>
|
||||
</div>
|
||||
<div className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2">
|
||||
<div className="relative">
|
||||
@@ -155,7 +156,7 @@ const Reports: React.FC = () => {
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Help</div>
|
||||
<div className="justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Help</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,23 +172,23 @@ const Reports: React.FC = () => {
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-Neutrals-NeutralSlate500 text-sm font-medium font-['Inter'] leading-tight">Settings</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate500] text-sm font-medium font-['Inter'] leading-tight">Settings</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Card */}
|
||||
<div className="self-stretch bg-Neutrals-NeutralSlate0 rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
|
||||
<div className="self-stretch bg-[--Neutrals-NeutralSlate0] rounded-[20px] shadow-[0px_1px_4px_0px_rgba(14,18,27,0.04)] outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 flex flex-col justify-start items-start overflow-hidden">
|
||||
<div className="self-stretch h-24 relative">
|
||||
<div className="w-60 h-32 left-0 top-[-0.50px] absolute bg-gradient-to-b from-black to-black/0" />
|
||||
</div>
|
||||
<div className="self-stretch p-3 flex flex-col justify-start items-start gap-1">
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate800 text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] text-sm font-semibold font-['Inter'] leading-tight">Build [Company]'s Report</div>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate500] text-xs font-normal font-['Inter'] leading-none">Share this form with your team members to capture valuable info about your company to train Auditly.</div>
|
||||
</div>
|
||||
<div className="self-stretch px-3 pb-3 flex flex-col justify-start items-start gap-8">
|
||||
<div className="self-stretch inline-flex justify-start items-start gap-2">
|
||||
<div className="flex-1 px-3 py-1.5 bg-Button-Secondary rounded-[999px] flex justify-center items-center gap-0.5 overflow-hidden">
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">Invite</div>
|
||||
<div className="justify-center text-[--Neutrals-NeutralSlate950] text-sm font-medium font-['Inter'] leading-tight">Invite</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -195,7 +196,7 @@ const Reports: React.FC = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 px-3 py-1.5 bg-Brand-Orange rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
|
||||
<div className="flex-1 px-3 py-1.5 bg-[--Brand-Orange] rounded-[999px] outline outline-1 outline-offset-[-1px] outline-blue-400 flex justify-center items-center gap-0.5 overflow-hidden">
|
||||
<div className="relative">
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.97171 12.2442L8.0289 13.1871C6.72716 14.4888 4.61661 14.4888 3.31486 13.1871C2.01311 11.8853 2.01311 9.77476 3.31486 8.47301L4.25767 7.5302M12.7429 8.47301L13.6858 7.5302C14.9875 6.22845 14.9875 4.1179 13.6858 2.81615C12.384 1.51441 10.2735 1.51441 8.97171 2.81615L8.0289 3.75896M6.16697 10.3349L10.8336 5.66826" stroke="var(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
@@ -212,16 +213,16 @@ const Reports: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Middle Section - Employee List */}
|
||||
<div className="flex-1 self-stretch bg-Neutrals-NeutralSlate0 flex justify-start items-center">
|
||||
<div className="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-Outline-Outline-Gray-200 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-[--Neutrals-NeutralSlate950] 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 */}
|
||||
<div className="self-stretch px-2.5 flex flex-col justify-start items-start gap-2">
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-1">
|
||||
<div className="self-stretch px-4 py-3 bg-Neutrals-NeutralSlate100 rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<div className="self-stretch px-4 py-3 bg-[--Neutrals-NeutralSlate100] rounded-[999px] inline-flex justify-start items-center gap-2 overflow-hidden">
|
||||
<div className="relative">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 17.5L14.5834 14.5833M16.6667 9.58333C16.6667 13.4954 13.4954 16.6667 9.58333 16.6667C5.67132 16.6667 2.5 13.4954 2.5 9.58333C2.5 5.67132 5.67132 2.5 9.58333 2.5C13.4954 2.5 16.6667 5.67132 16.6667 9.58333Z" stroke="var(--Neutrals-NeutralSlate500, #717680)" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
@@ -232,7 +233,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-[--Neutrals-NeutralSlate500] text-sm font-normal font-['Inter'] leading-tight outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -247,12 +248,12 @@ 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="w-7 h-7 p-1 bg-[--Brand-Orange] rounded-[666.67px] flex justify-center items-center">
|
||||
<div className="text-center justify-start text-white 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-[--Neutrals-NeutralSlate950] text-sm font-normal font-['Inter'] leading-tight">Company Report</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -265,11 +266,11 @@ const Reports: React.FC = () => {
|
||||
onClick={() => handleEmployeeSelect(employee)}
|
||||
>
|
||||
<div className="w-7 h-7 p-1 bg-Main-BG-Gray-100 rounded-[666.67px] flex justify-center items-center">
|
||||
<div className="text-center justify-start text-Neutrals-NeutralSlate500 text-xs font-medium font-['Inter'] leading-none">
|
||||
<div className="text-center justify-start text-[--Neutrals-NeutralSlate500] text-xs font-medium font-['Inter'] leading-none">
|
||||
{employee.initials}
|
||||
</div>
|
||||
</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-[--Neutrals-NeutralSlate800] text-sm font-normal font-['Inter'] leading-tight">
|
||||
{employee.name}
|
||||
</div>
|
||||
</div>
|
||||
@@ -289,17 +290,17 @@ const Reports: React.FC = () => {
|
||||
/>
|
||||
) : (
|
||||
<EmployeeReportContent
|
||||
report={selectedReport.report as Report}
|
||||
report={selectedReport.report as EmployeeReport}
|
||||
employeeName={selectedReport.employeeName!}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<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-[--Neutrals-NeutralSlate950] mb-2">
|
||||
Select a Report
|
||||
</h3>
|
||||
<p className="text-Neutrals-NeutralSlate500">
|
||||
<p className="text-[--Neutrals-NeutralSlate500]">
|
||||
Choose a company or employee report from the list to view details.
|
||||
</p>
|
||||
</div>
|
||||
@@ -318,14 +319,16 @@ const CompanyReportContent: React.FC<{
|
||||
onRegenerate: () => void;
|
||||
isGenerating: boolean;
|
||||
}> = ({ report, onRegenerate, isGenerating }) => {
|
||||
const [activeDepartmentTab, setActiveDepartmentTab] = useState('Campaigns');
|
||||
|
||||
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-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
|
||||
Company Report
|
||||
</div>
|
||||
<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="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(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
@@ -374,10 +377,218 @@ const CompanyReportContent: React.FC<{
|
||||
<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">Personnel Changes</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-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-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>
|
||||
<div className="text-sm text-green-600">Department: {hire.department}</div>
|
||||
{hire.impact && <div className="text-sm text-green-600 mt-1">{hire.impact}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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-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>
|
||||
<div className="text-sm text-blue-600">{promotion.fromRole} → {promotion.toRole}</div>
|
||||
{promotion.impact && <div className="text-sm text-blue-600 mt-1">{promotion.impact}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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-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>
|
||||
<div className="text-sm text-red-600">Department: {departure.department}</div>
|
||||
<div className="text-sm text-red-600">Reason: {departure.reason}</div>
|
||||
{departure.impact && <div className="text-sm text-red-600 mt-1">{departure.impact}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No changes message */}
|
||||
{(!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-Text-Gray-500 text-base font-normal font-['Inter'] leading-normal">
|
||||
No personnel changes to report.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hiring Needs */}
|
||||
{report?.immediateHiringNeeds && report.immediateHiringNeeds.length > 0 && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Immediate Hiring Needs</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">
|
||||
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.personnelChanges}
|
||||
{/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
|
||||
{report.immediateHiringNeeds.map((need, index) => (
|
||||
<div key={index} className="self-stretch p-4 bg-white rounded-lg border border-Text-Gray-200 flex flex-col justify-start items-start gap-2">
|
||||
<div className="flex justify-between items-start w-full">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">
|
||||
{need.role} - {need.department}
|
||||
</div>
|
||||
<div className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${need.priority === 'High' ? 'bg-red-100 text-red-800' :
|
||||
need.priority === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-green-100 text-green-800'
|
||||
}`}>
|
||||
{need.priority} Priority
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-Text-Gray-600 text-sm font-normal font-['Inter'] leading-normal">
|
||||
{need.reasoning}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Forward Plan */}
|
||||
{report?.forwardOperatingPlan && (
|
||||
<div className="w-full self-stretch p-3 bg-Text-Gray-100 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">Forward Plan</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.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-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">{plan.title}</div>
|
||||
<div className="self-stretch h-12 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{plan.details.map((detail, idx) => (
|
||||
<p key={idx}>{detail}</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-Text-Gray-200" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*
|
||||
Strengths goes here
|
||||
*/}
|
||||
{report?.strengths && (
|
||||
<div className="self-stretch p-3 bg-Text-Gray-100 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-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, idx) => (
|
||||
<div key={idx} className="self-stretch inline-flex justify-start items-start gap-4">
|
||||
<div className="w-6 h-6 relative rounded-[999px] overflow-hidden">
|
||||
<div className="w-6 h-6 left-0 top-0 absolute bg-Other-Green rounded-full" />
|
||||
<div data-svg-wrapper className="left-[5px] top-[5px] absolute">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24998 9.91667L2.33331 7" stroke="var(--Neutrals-NeutralSlate0, #FDFDFD)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*
|
||||
Organizational Impact Summary
|
||||
*/}
|
||||
{report?.organizationalImpactSummary && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Organizational Impact Summary</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-6">
|
||||
|
||||
{/* Mission Critical */}
|
||||
<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-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-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>
|
||||
</div>
|
||||
|
||||
{/* Highly Valuable */}
|
||||
<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-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-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>
|
||||
</div>
|
||||
|
||||
{/* Core Support */}
|
||||
<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-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-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>
|
||||
</div>
|
||||
|
||||
{/* Low Criticality */}
|
||||
<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-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-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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -390,33 +601,27 @@ const CompanyReportContent: React.FC<{
|
||||
</div>
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-3">
|
||||
<div className="p-1 bg-Text-Gray-200 rounded-full outline outline-1 outline-offset-[-1px] outline-Outline-Outline-Gray-200 inline-flex justify-start items-center gap-1">
|
||||
<div className="px-3 py-1.5 bg-Main-BG-White-0 rounded-full flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className="justify-start text-Text-Dark-950 text-xs font-medium font-['Inter'] leading-none">Campaigns</div>
|
||||
{/* Department Tabs */}
|
||||
{['Campaigns', 'Social Media', 'Creative', 'Tech', 'Admin/OPS'].map((dept) => (
|
||||
<div
|
||||
key={dept}
|
||||
className={`px-3 py-1.5 rounded-full flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${activeDepartmentTab === dept
|
||||
? 'bg-Main-BG-White-0'
|
||||
: 'shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)]'
|
||||
}`}
|
||||
onClick={() => setActiveDepartmentTab(dept)}
|
||||
>
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className={`justify-start text-xs font-medium font-['Inter'] leading-none ${activeDepartmentTab === dept ? 'text-Text-Dark-950' : 'text-zinc-600'
|
||||
}`}>
|
||||
{dept}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1.5 rounded-full shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className="justify-start text-zinc-600 text-xs font-medium font-['Inter'] leading-none">Social Media</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1.5 rounded-full shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className="justify-start text-zinc-600 text-xs font-medium font-['Inter'] leading-none">Creative</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1.5 rounded-full shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className="justify-start text-zinc-600 text-xs font-medium font-['Inter'] leading-none">Tech</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1.5 rounded-full shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] shadow-[inset_0px_-2px_0px_0px_rgba(10,13,18,0.05)] shadow-[inset_0px_0px_0px_1px_rgba(10,13,18,0.18)] flex justify-center items-center gap-1 overflow-hidden">
|
||||
<div className="px-0.5 flex justify-center items-center">
|
||||
<div className="justify-start text-zinc-600 text-xs font-medium font-['Inter'] leading-none">Admin/OPS</div>
|
||||
</div>
|
||||
</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">
|
||||
{/* Department Overview Section */}
|
||||
<div className="self-stretch p-5 bg-Text-Gray-100 rounded-2xl outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 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-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">Department Overview</div>
|
||||
@@ -436,42 +641,63 @@ const CompanyReportContent: React.FC<{
|
||||
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-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">
|
||||
{report?.gradingBreakdown?.teamScores
|
||||
?.filter(teamScore => {
|
||||
// Filter employees based on active department tab
|
||||
// For now, showing all employees as we don't have department info per employee
|
||||
// In a real implementation, you'd filter by employee department
|
||||
return true;
|
||||
})
|
||||
?.map((teamScore, index) => {
|
||||
const radarData = [
|
||||
{ label: 'Reliability', value: teamScore.reliability * 10 },
|
||||
{ label: 'Role Fit', value: teamScore.roleFit * 10 },
|
||||
{ label: 'Scalability', value: teamScore.scalability * 10 },
|
||||
{ label: 'Output', value: teamScore.output * 10 },
|
||||
{ label: 'Initiative', value: teamScore.initiative * 10 }
|
||||
];
|
||||
|
||||
return (
|
||||
<div key={index} className="p-4 bg-white rounded-lg shadow-sm border border-Text-Gray-200 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-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' :
|
||||
'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
Grade: {teamScore.grade}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-64">
|
||||
<RadarPerformanceChart
|
||||
data={radarData}
|
||||
height={240}
|
||||
color={
|
||||
teamScore.grade.startsWith('A') ? '#22c55e' :
|
||||
teamScore.grade.startsWith('B') ? '#3b82f6' :
|
||||
teamScore.grade.startsWith('C') ? '#f59e0b' :
|
||||
'#ef4444'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hiring Needs */}
|
||||
{report?.immediateHiringNeeds && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Hiring Needs</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">
|
||||
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.immediateHiringNeeds}
|
||||
{/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Forward Plan */}
|
||||
{report?.forwardOperatingPlan && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Forward Plan</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">
|
||||
<div className="self-stretch justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.forwardOperatingPlan}
|
||||
{/* Copilot, we need to implement this so that it works with the defined type, it's not currently implemented correctly. */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Company Strengths */}
|
||||
{report?.organizationalStrengths && (
|
||||
{/* {report?.organizationalStrengths && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Company Strengths</div>
|
||||
@@ -494,7 +720,7 @@ const CompanyReportContent: React.FC<{
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -502,17 +728,17 @@ const CompanyReportContent: React.FC<{
|
||||
|
||||
// Component for displaying employee report content
|
||||
const EmployeeReportContent: React.FC<{
|
||||
report: Report;
|
||||
report: EmployeeReport;
|
||||
employeeName: string;
|
||||
}> = ({ report, employeeName }) => {
|
||||
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-[--Neutrals-NeutralSlate800] text-base font-medium font-['Inter'] leading-normal">
|
||||
{employeeName}'s Answers
|
||||
</div>
|
||||
<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="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(--Other-White, white)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
@@ -526,7 +752,7 @@ const EmployeeReportContent: React.FC<{
|
||||
|
||||
{/* Content */}
|
||||
<div className="self-stretch flex flex-col justify-start items-start gap-4 px-5 pb-6 overflow-y-auto">
|
||||
{/* Performance Overview */}
|
||||
{/* Role & Responsibilities */}
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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>
|
||||
@@ -538,44 +764,91 @@ const EmployeeReportContent: React.FC<{
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Work Output */}
|
||||
{report.roleAndOutput?.output && (
|
||||
{/* Self-Rated Output */}
|
||||
{report.roleAndOutput?.selfRatedOutput && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Work 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">
|
||||
{report.roleAndOutput.output}
|
||||
{report.roleAndOutput.selfRatedOutput}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Skills & Experience */}
|
||||
{report.skillsAndExperience && (
|
||||
{/* Insights */}
|
||||
{report.insights && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Skills & Experience</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">
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.skillsAndExperience}
|
||||
</p>
|
||||
{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">
|
||||
{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">
|
||||
{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">
|
||||
{report.insights.growthDesire}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Communication Style */}
|
||||
{report.communicationStyle && (
|
||||
{/* Strengths */}
|
||||
{report.strengths && report.strengths.length > 0 && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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">Communication Style</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">
|
||||
<p className="text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||||
{report.communicationStyle}
|
||||
</p>
|
||||
{report.strengths.map((strength, index) => (
|
||||
<div key={index} className="self-stretch flex justify-start items-start gap-3">
|
||||
<div className="w-6 h-6 relative rounded-[999px] overflow-hidden">
|
||||
<div className="w-6 h-6 left-0 top-0 absolute bg-Other-Green rounded-full" />
|
||||
<div className="left-[5px] top-[5px] absolute">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6666 3.5L5.24998 9.91667L2.33331 7" stroke="var(--Neutrals-NeutralSlate0, #FDFDFD)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{strength}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recommendations */}
|
||||
{report.recommendations && report.recommendations.length > 0 && (
|
||||
<div className="w-full p-3 bg-Text-Gray-100 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>
|
||||
<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">
|
||||
• {recommendation}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user