fix: simplify EmployeeQuestionnaireNew to use invite-only flow
- Remove all authentication and org context dependencies - Simplify component to work only with invite codes from URL - Remove complex user/employee matching logic - Keep exact Figma UI components and styling - Use only submitViaInvite function for API submissions - Employees never need to log in, only use invite link
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useOrg } from '../contexts/OrgContext';
|
||||
import { secureApiPOST, secureApi } from '../services/secureApi';
|
||||
import { secureApi } from '../services/secureApi';
|
||||
import { CompanyReport, Employee, EmployeeReport } from '../types';
|
||||
import { SAMPLE_COMPANY_REPORT } from '../constants';
|
||||
import RadarPerformanceChart from '../components/charts/RadarPerformanceChart';
|
||||
@@ -44,6 +44,17 @@ const Reports: React.FC = () => {
|
||||
loadCompanyReport();
|
||||
}, [currentUserIsOwner, getFullCompanyReportHistory]);
|
||||
|
||||
const handleEmployeeSelect = useCallback((employee: Employee) => {
|
||||
const employeeReport = reports[employee.id];
|
||||
if (employeeReport) {
|
||||
setSelectedReport({
|
||||
report: employeeReport,
|
||||
type: 'employee',
|
||||
employeeName: employee.name
|
||||
});
|
||||
}
|
||||
}, [reports]);
|
||||
|
||||
// Handle navigation from Submissions page
|
||||
useEffect(() => {
|
||||
if (selectedEmployeeId) {
|
||||
@@ -61,17 +72,6 @@ const Reports: React.FC = () => {
|
||||
).sort((a, b) => a.name.localeCompare(b.name))
|
||||
: employees.filter(emp => emp.id === user?.uid);
|
||||
|
||||
const handleEmployeeSelect = useCallback((employee: Employee) => {
|
||||
const employeeReport = reports[employee.id];
|
||||
if (employeeReport) {
|
||||
setSelectedReport({
|
||||
report: employeeReport,
|
||||
type: 'employee',
|
||||
employeeName: employee.name
|
||||
});
|
||||
}
|
||||
}, [reports]);
|
||||
|
||||
const handleCompanyReportSelect = () => {
|
||||
if (companyReport) {
|
||||
setSelectedReport({ report: companyReport, type: 'company' });
|
||||
@@ -203,6 +203,9 @@ const CompanyReportContent: React.FC<{
|
||||
const [activeDepartmentTab, setActiveDepartmentTab] = useState(() =>
|
||||
report?.gradingBreakdown?.[0]?.departmentNameShort || 'Campaigns'
|
||||
);
|
||||
const [activeImpactSummary, setActiveImpactSummary] = useState(() =>
|
||||
report?.organizationalImpactSummary?.[0]?.category || 'Mission Critical'
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -322,24 +325,6 @@ 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-[--Neutrals-NeutralSlate950] 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) => (
|
||||
<div key={index} 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">{need.role} - {need.department}</div>
|
||||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">
|
||||
<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="self-stretch h-0 outline outline-1 outline-offset-[-0.50px] outline-[--Neutrals-NeutralSlate200]">
|
||||
<hr className="border-0 border-t border-[--Neutrals-NeutralSlate200]" />
|
||||
</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}>
|
||||
@@ -420,13 +405,14 @@ const CompanyReportContent: React.FC<{
|
||||
{/*
|
||||
Organizational Impact Summary
|
||||
*/}
|
||||
{/**
|
||||
{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>
|
||||
<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">
|
||||
{/* 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>
|
||||
@@ -442,7 +428,6 @@ const CompanyReportContent: React.FC<{
|
||||
</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>
|
||||
@@ -458,7 +443,6 @@ const CompanyReportContent: React.FC<{
|
||||
</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>
|
||||
@@ -474,7 +458,6 @@ const CompanyReportContent: React.FC<{
|
||||
</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>
|
||||
@@ -492,6 +475,72 @@ const CompanyReportContent: React.FC<{
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
**/}
|
||||
|
||||
<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>
|
||||
<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">
|
||||
{/* Department Tabs */}
|
||||
{report?.organizationalImpactSummary.map((dept, index) => (
|
||||
<div
|
||||
key={dept.category}
|
||||
className={`px-3 py-1.5 rounded-full flex justify-center items-center gap-1 overflow-hidden cursor-pointer ${activeImpactSummary === dept.category
|
||||
? 'bg-[--Neutrals-NeutralSlate0]'
|
||||
: 'bg-[--Neutrals-NeutralSlate100] 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={() => 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'
|
||||
}`}>
|
||||
<span className={`flex-shrink-0 w-2 h-2 rounded-full mr-2
|
||||
${dept?.employees.length === 0 ? 'blinkLightEmpty bg-[--Neutrals-NeutralSlate100]' : ''}
|
||||
${dept.category === "Mission Critical" ?
|
||||
'bg-green-400 blinkLightGreen' :
|
||||
dept.category === "Highly Valuable" ?
|
||||
'bg-yellow-400 blinkLightYellow' :
|
||||
dept.category === "Core Support" ?
|
||||
'bg-blue-800 blinkLightBlue' :
|
||||
dept.category === "Low Criticality" ?
|
||||
'bg-red-600 blinkLightRed' :
|
||||
''}
|
||||
`}></span>{dept.category}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Content for the currently selected department */}
|
||||
{(() => {
|
||||
const currentImpact = report?.organizationalImpactSummary.find(dept => dept.category === activeImpactSummary);
|
||||
if (!currentImpact) return null;
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* Department Overview Section */}
|
||||
{
|
||||
currentImpact && currentImpact?.employees.map((item) => (
|
||||
<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>
|
||||
<div className="self-stretch justify-start text-[--Neutrals-NeutralSlate800] 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>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 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">
|
||||
@@ -553,11 +602,11 @@ const CompanyReportContent: React.FC<{
|
||||
<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 = [
|
||||
{ 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 }
|
||||
{ label: 'Reliability', value: teamScore.reliability },
|
||||
{ label: 'Role Fit', value: teamScore.roleFit },
|
||||
{ label: 'Scalability', value: teamScore.scalability },
|
||||
{ label: 'Output', value: teamScore.output },
|
||||
{ label: 'Initiative', value: teamScore.initiative }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -577,10 +626,10 @@ const CompanyReportContent: React.FC<{
|
||||
data={radarData}
|
||||
height={240}
|
||||
color={
|
||||
teamScore.grade.startsWith('A') ? '#22c55e' :
|
||||
teamScore.grade.startsWith('B') ? '#3b82f6' :
|
||||
teamScore.grade.startsWith('C') ? '#f59e0b' :
|
||||
'#ef4444'
|
||||
teamScore.grade.startsWith('A') ? 'var(--Brand-Orange)' :
|
||||
teamScore.grade.startsWith('B') ? 'var(--color-green)' :
|
||||
teamScore.grade.startsWith('C') ? 'var(--color-yellow)' :
|
||||
'var(--color-red)'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -594,32 +643,6 @@ const CompanyReportContent: React.FC<{
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Company Strengths */}
|
||||
{/* {report?.organizationalStrengths && (
|
||||
<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">Company 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.organizationalStrengths.map((strength, index) => (
|
||||
<div key={index}>
|
||||
<div className="self-stretch inline-flex justify-between items-start">
|
||||
<div className="w-48 justify-start text-Text-Gray-800 text-base font-semibold font-['Inter'] leading-normal">{strength.title}:</div>
|
||||
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">{strength.description}</div>
|
||||
</div>
|
||||
{index < report.organizationalStrengths.length - 1 && (
|
||||
<div className="my-4">
|
||||
<svg width="784" height="2" viewBox="0 0 784 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 1H784" stroke="var(--Text-Gray-200, #E9EAEB)" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
</div >
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user